From 25fa7339433bd7ac63fe947855299d3177dc5334 Mon Sep 17 00:00:00 2001
From: hujiale <13306077+hujiale9527@user.noreply.gitee.com>
Date: Fri, 25 Oct 2024 13:10:38 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../home/components/Output2/index.vue         |   8 +-
 .../src/views/dashboard/home/index.vue        | 236 +++---------------
 2 files changed, 45 insertions(+), 199 deletions(-)

diff --git a/apps/web-test/src/views/dashboard/home/components/Output2/index.vue b/apps/web-test/src/views/dashboard/home/components/Output2/index.vue
index 86cb4868..19d6f01a 100644
--- a/apps/web-test/src/views/dashboard/home/components/Output2/index.vue
+++ b/apps/web-test/src/views/dashboard/home/components/Output2/index.vue
@@ -315,9 +315,15 @@ const selectTodoClick = (item: string) => {
           全部
         </Button>
       </li>
-      <li v-for="item in plainOptions" :key="item" @click="selectedClick(item)">
+      <li
+        v-for="(item, index) in plainOptions"
+        :key="item"
+        @click="selectedClick(item)"
+      >
         <Button :type="selectClass == item ? 'primary' : 'default'">
           {{ item }}
+          <span v-if="index == 3" class="text-[#f10215]">(10)</span>
+          <span v-if="index == 6" class="text-[#f10215]">(9)</span>
         </Button>
       </li>
     </ul>
diff --git a/apps/web-test/src/views/dashboard/home/index.vue b/apps/web-test/src/views/dashboard/home/index.vue
index 101c2ace..6a10a8f1 100644
--- a/apps/web-test/src/views/dashboard/home/index.vue
+++ b/apps/web-test/src/views/dashboard/home/index.vue
@@ -39,7 +39,7 @@ import { storeToRefs } from 'pinia';
 
 import { useCanvasStore, UseTilesStore } from '#/store';
 
-import { tilesList } from './tiles';
+import { groupList, tilesList } from './tiles';
 import { debounce, isElementInFolder, isGroup, updateRowHeight } from './utils';
 
 const tilesStore = UseTilesStore();
@@ -569,8 +569,7 @@ const formState = reactive({
       Displayed as <code>[x, y, w, h]</code>:
       <div class="columns">
         <div v-for="item in layout">
-          <b>{{ item.i }}</b
-          >: [{{ item.x }}, {{ item.y }}, {{ item.w }}, {{ item.h }}]
+          <b>{{ item.i }}</b>: [{{ item.x }}, {{ item.y }}, {{ item.w }}, {{ item.h }}]
         </div>
       </div>
     </div>
@@ -671,209 +670,50 @@ const formState = reactive({
           <template #content>
             <div class="shop-seach mb-2 flex items-center">
               <Select v-model:value="shopFlotter">
-                <SelectOption value="1">全部应用磁贴</SelectOption>
-                <SelectOption value="2">Option2</SelectOption>
+                <SelectOption value="-1">全部应用磁贴</SelectOption>
+                <SelectOption
+                  v-for="(item, index) in groupList"
+                  :key="index"
+                  :value="index"
+                >
+                  {{ item.label }}
+                </SelectOption>
               </Select>
               <InputSearch placeholder="" />
             </div>
             <div class="shop-box">
               <!-- <CheckboxGroup v-model:value="selectTilseArr" style="width: 100%"> -->
               <Collapse v-model:active-key="activeKeyArr" style="width: 100%">
-                <CollapsePanel key="1" header="个人工作台（22）">
-                  <!-- 可拖入的组件部分 -->
+                <CollapsePanel
+                  v-for="(value, num) in groupList"
+                  :key="num"
+                  :header="value.label"
+                >
                   <div class="components-box">
-                    <div
-                      v-for="item in componentsInfo.slice(0, 22)"
-                      :key="item.name"
-                      :class="{
-                        'active pointer-events-none !cursor-no-drop': haveItem(
-                          item.name,
-                        ),
-                      }"
-                      :draggable="haveItem(item.name)"
-                      class="ctrl-box bg-background relative"
-                      @drag="drag"
-                      @dragend="dragend($event)"
-                      @dragstart="dragstart($event, item)"
-                    >
-                      <div class="ctrl-name">
-                        {{ `${item.name}(${item.size})` }}
+                    <template v-for="item in tilesList" :key="item.name">
+                      <div
+                        v-if="item.group == value.value"
+                        :class="{
+                          'active pointer-events-none !cursor-no-drop':
+                            haveItem(item.name),
+                        }"
+                        :draggable="haveItem(item.name)"
+                        class="ctrl-box bg-background relative"
+                        @drag="drag"
+                        @dragend="dragend($event)"
+                        @dragstart="dragstart($event, item)"
+                      >
+                        <div class="ctrl-name">
+                          {{ `${item.name}(${item.size})` }}
+                        </div>
+                        <img :src="`/xbyt/${item.name2}`" alt="" />
+                        <Checkbox
+                          :checked="haveItem(item.name)"
+                          :value="item.name"
+                          class="absolute bottom-0 right-1"
+                        />
                       </div>
-                      <img :src="`/xbyt/${item.name2}`" alt="" />
-                      <Checkbox
-                        :checked="haveItem(item.name)"
-                        :value="item.name"
-                        class="absolute bottom-0 right-1"
-                      />
-                    </div>
-                  </div>
-                </CollapsePanel>
-                <CollapsePanel key="2" header="综合行政（12）">
-                  <div class="components-box">
-                    <div
-                      v-for="item in componentsInfo.slice(22, 34)"
-                      :key="item.name"
-                      :class="{
-                        'active pointer-events-none !cursor-no-drop': haveItem(
-                          item.name,
-                        ),
-                      }"
-                      class="ctrl-box bg-background"
-                      draggable="true"
-                      @drag="drag"
-                      @dragend="dragend"
-                      @dragstart="dragstart($event, item)"
-                    >
-                      <div class="ctrl-name">
-                        {{ `${item.name}(${item.size})` }}
-                      </div>
-                      <img :src="`/xbyt/${item.name2}`" alt="" />
-                      <Checkbox
-                        :checked="haveItem(item.name)"
-                        :value="item.name"
-                        class="absolute bottom-0 right-1"
-                      />
-                    </div>
-                  </div>
-                </CollapsePanel>
-                <CollapsePanel key="3" header="经营管理（22）">
-                  <div class="components-box">
-                    <div
-                      v-for="item in componentsInfo.slice(34, 56)"
-                      :key="item.name"
-                      :class="{
-                        'active pointer-events-none !cursor-no-drop': haveItem(
-                          item.name,
-                        ),
-                      }"
-                      class="ctrl-box bg-background"
-                      draggable="true"
-                      @drag="drag"
-                      @dragend="dragend"
-                      @dragstart="dragstart($event, item)"
-                    >
-                      <div class="ctrl-name">
-                        {{ `${item.name}(${item.size})` }}
-                      </div>
-                      <img :src="`/xbyt/${item.name2}`" alt="" />
-                      <Checkbox
-                        :checked="haveItem(item.name)"
-                        :value="item.name"
-                        class="absolute bottom-0 right-1"
-                      />
-                    </div>
-                  </div>
-                </CollapsePanel>
-                <CollapsePanel key="4" header="安全生产（19）">
-                  <div class="components-box">
-                    <div
-                      v-for="item in componentsInfo.slice(56, 75)"
-                      :key="item.name"
-                      :class="{
-                        'active pointer-events-none !cursor-no-drop': haveItem(
-                          item.name,
-                        ),
-                      }"
-                      class="ctrl-box bg-background"
-                      draggable="true"
-                      @drag="drag"
-                      @dragend="dragend"
-                      @dragstart="dragstart($event, item)"
-                    >
-                      <div class="ctrl-name">
-                        {{ `${item.name}(${item.size})` }}
-                      </div>
-                      <img :src="`/xbyt/${item.name2}`" alt="" />
-                      <Checkbox
-                        :checked="haveItem(item.name)"
-                        :value="item.name"
-                        class="absolute bottom-0 right-1"
-                      />
-                    </div>
-                  </div>
-                </CollapsePanel>
-                <CollapsePanel key="5" header="勘探开发（26）">
-                  <div class="components-box">
-                    <div
-                      v-for="item in componentsInfo.slice(75, 101)"
-                      :key="item.name"
-                      :class="{
-                        'active pointer-events-none !cursor-no-drop': haveItem(
-                          item.name,
-                        ),
-                      }"
-                      class="ctrl-box bg-background"
-                      draggable="true"
-                      @drag="drag"
-                      @dragend="dragend"
-                      @dragstart="dragstart($event, item)"
-                    >
-                      <div class="ctrl-name">
-                        {{ `${item.name}(${item.size})` }}
-                      </div>
-                      <img :src="`/xbyt/${item.name2}`" alt="" />
-                      <Checkbox
-                        ::checked="haveItem(item.name)"
-                        :value="item.name"
-                        class="absolute bottom-0 right-1"
-                      />
-                    </div>
-                  </div>
-                </CollapsePanel>
-                <CollapsePanel key="6" header="数据管理（1）">
-                  <div class="components-box">
-                    <div
-                      v-for="item in componentsInfo.slice(101, 102)"
-                      :key="item.name"
-                      :class="{
-                        'active pointer-events-none !cursor-no-drop': haveItem(
-                          item.name,
-                        ),
-                      }"
-                      class="ctrl-box bg-background"
-                      draggable="true"
-                      @drag="drag"
-                      @dragend="dragend"
-                      @dragstart="dragstart($event, item)"
-                    >
-                      <div class="ctrl-name">
-                        {{ `${item.name}(${item.size})` }}
-                      </div>
-                      <img :src="`/xbyt/${item.name2}`" alt="" />
-                      <Checkbox
-                        :checked="haveItem(item.name)"
-                        :value="item.name"
-                        class="absolute bottom-0 right-1"
-                      />
-                    </div>
-                  </div>
-                </CollapsePanel>
-                <CollapsePanel key="7" header="总部系统（25）">
-                  <div class="components-box">
-                    <div
-                      v-for="item in componentsInfo.slice(102, 127)"
-                      :key="item.name"
-                      :class="{
-                        'active pointer-events-none !cursor-no-drop': haveItem(
-                          item.name,
-                        ),
-                      }"
-                      class="ctrl-box bg-background"
-                      draggable="true"
-                      @drag="drag"
-                      @dragend="dragend"
-                      @dragstart="dragstart($event, item)"
-                    >
-                      <div class="ctrl-name">
-                        {{ `${item.name}(${item.size})` }}
-                      </div>
-                      <img :src="`/xbyt/${item.name2}`" alt="" />
-                      <Checkbox
-                        :checked="haveItem(item.name)"
-                        :value="item.name"
-                        class="absolute bottom-0 right-1"
-                      />
-                    </div>
+                    </template>
                   </div>
                 </CollapsePanel>
               </Collapse>