展示屏选取配置展示

src/components/MyComponent/MyTitle/my-title.vue

@@ -3,7 +3,6 @@
     <img :src="bgImg" class="bg" />
     <div class="date">{{ date }} {{ time }}</div>
     <img
-      v-if="editable"
       src="@/assets/images/filter.png"
       class="filter"
       draggable="false"

src/view/view-page.vue

 <template>
   <div class="main">
-    <m-title area="title"> 静安智慧房管 </m-title>
+    <m-title area="title" @touch="showModal = true"> 静安智慧房管 </m-title>
     <m-grid
       v-if="layout.boxNum > 0"
       :template="layout.template"
@@ -19,15 +19,40 @@
         />
       </div>
     </m-grid>
+    <m-modal v-model="showModal" title="选择展示屏">
+      <div class="list-content">
+        <div v-for="item in list" :key="item.id" class="item">
+          <p>{{ item.configName }}</p>
+          <p>{{ item.updateTime }}</p>
+          <n-button size="tiny" type="info" ghost dashed @click="check(item)">
+            查看
+          </n-button>
+        </div>
+      </div>
+    </m-modal>
   </div>
 </template>
 
 <script lang="ts" setup>
 import useLayout from '@/hooks/useLayout'
 import useComponent from '@/hooks/useComponent'
+import { ref } from 'vue'
+import { ajax, api } from '@/ajax'
+import { NSpace, NButton } from 'naive-ui'
 
 const { layout } = useLayout()
 const { components, componentList } = useComponent()
+const list = ref([])
+ajax.get({ url: api.CONFIGS, params: { pageSize: 9000 } }).then((res) => {
+  list.value = res?.data?.content || []
+})
+const showModal = ref(false)
+function check({ configJson }) {
+  const config = JSON.parse(configJson)
+  config?.layout && (layout.value = config.layout)
+  config?.components && (components.value = config.components)
+  showModal.value = false
+}
 </script>
 
 <style lang="stylus" scoped>
@@ -43,4 +68,25 @@ const { components, componentList } = useComponent()
   $blur(0)
   position relative
   overflow hidden
+.list-content
+  max-height 60vh
+  overflow-y auto
+  >.item
+    font-size .12rem
+    font-weight bold
+    display flex
+    align-items center
+    padding .05rem
+    &:nth-of-type(2n+1)
+      background rgba(0,0,0,.5)
+    &:hover
+      background rgba(255,255,255,.2)
+    >p
+      flex 1
+      overflow hidden
+      white-space nowrap
+      text-overflow ellipsis
+      &:nth-of-type(2)
+        flex 2
+        margin 0 .1rem
 </style>