1.大屏选择组件弹窗实现。

src/views/screens/configs/SelectComponents.vue

@@ -1,23 +1,76 @@
 <template>
-  <el-drawer v-model="commonS.isShowSelectModule" :append-to-body="true">
-    <span @click="select1">组件1</span>
-    <span @click="select2">组件2</span>
+  <el-drawer
+    v-model="commonS.isShowSelectModule"
+    :append-to-body="true"
+    :destroy-on-close="true"
+    :show-close="false"
+    size="50%"
+  >
+    <template #header>
+      <h2>请选择想要展示的组件</h2>
+    </template>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button size="large" type="primary" @click="handleSubmit"
+          >确 定
+        </el-button>
+        <el-button size="large" @click="closeDialog">取 消</el-button>
+      </div>
+    </template>
+    <el-table
+      ref="singleTableRef"
+      :data="tableData"
+      highlight-current-row
+      size="large"
+      style="width: 100%"
+      @current-change="handleCurrentChange"
+    >
+      <el-table-column label="组件名称" property="name" />
+      <el-table-column label="描述" property="description" />
+    </el-table>
   </el-drawer>
 </template>
 
 <script lang="ts" setup>
 import { useCommonStore } from "@/store";
+import { ElTable } from "element-plus";
+import {
+  componentsDicts,
+  ScreenComponent,
+} from "@/views/screens/configs/components";
 
 const commonS = useCommonStore();
 
-const select1 = () => {
-  commonS.isShowSelectModule = false;
-  commonS[commonS.moduleKey as string] = "EquipmentMonitoring";
+const currentRow = ref();
+const singleTableRef = ref<InstanceType<typeof ElTable>>();
+
+const setCurrent = (row?: ScreenComponent) => {
+  singleTableRef.value && singleTableRef.value.setCurrentRow(row);
+};
+const handleCurrentChange = (val) => {
+  currentRow.value = val;
+};
+const tableData = ref<ScreenComponent[]>([]);
+
+onMounted(() => {
+  let allKeys = Object.keys(componentsDicts);
+  allKeys.forEach((key) => {
+    tableData.value.push(componentsDicts[key]);
+  });
+  nextTick(() => {
+    setCurrent(componentsDicts[commonS.moduleKey as string]);
+  });
+});
+
+const handleSubmit = () => {
+  if (currentRow.value && currentRow.value.key) {
+    commonS[commonS.moduleKey as string] = currentRow.value.key;
+    commonS.isShowSelectModule = false;
+  }
 };
 
-const select2 = () => {
+const closeDialog = () => {
   commonS.isShowSelectModule = false;
-  commonS[commonS.moduleKey as string] = "ProductionSituation";
 };
 </script>
 

src/views/screens/configs/components.ts

@@ -1,12 +1,31 @@
 import EquipmentMonitoring from "@/views/screens/screen-components/EquipmentMonitoring.vue";
 import ProductionSituation from "@/views/screens/screen-components/ProductionSituation.vue";
 
-export const componentsDicts: { [key: string]: any } = {
+export interface ScreenComponent {
+  name: string;
+  key: string;
+  component: any;
+  description: string;
+}
+
+export const componentsDicts: { [key: string]: ScreenComponent } = {
   // Add your components here
-  EquipmentMonitoring: EquipmentMonitoring,
-  ProductionSituation: ProductionSituation,
+  EquipmentMonitoring: {
+    name: "Equipment Monitoring",
+    component: EquipmentMonitoring,
+    key: "EquipmentMonitoring",
+    description:
+      "This component shows the status of the equipment in real-time.",
+  },
+  ProductionSituation: {
+    name: "Production Situation",
+    component: ProductionSituation,
+    key: "ProductionSituation",
+    description:
+      "This component shows the production situation of the company.",
+  },
 };
 
 export const getComponetnByName = (name: string) => {
-  return componentsDicts[name];
+  return componentsDicts[name].component;
 };

src/views/screens/screen-components/EquipmentMonitoring.vue

@@ -2,7 +2,7 @@
   <div
     class="screen-common-component"
     style="background-color: pink"
-    @click="selectComponents"
+    @dbclick="selectComponents"
   >
     到付件爱神的箭佛爱打架发哦费{{ moduleId }}
   </div>