1.大屏选择组件功能持久化保存，抽离选择方法放在公共header里面。

src/store/index.ts

@@ -1,7 +1,9 @@
 import type { App } from "vue";
 import { createPinia } from "pinia";
+import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
 
 const store = createPinia();
+store.use(piniaPluginPersistedstate);
 
 // 全局注册 store
 export function setupStore(app: App<Element>) {

src/store/modules/common.ts

@@ -1,8 +1,12 @@
 import { store } from "@/store";
 import { defineStore } from "pinia";
 
+interface CommonState {
+  [key: string]: any;
+}
+
 export const useCommonStore = defineStore("commonStore", {
-  state: () => ({
+  state: (): CommonState => ({
     // 弹出公共Table的弹窗
     isShowTable: false,
     tableType: 1,
@@ -13,6 +17,7 @@ export const useCommonStore = defineStore("commonStore", {
     moduleKey: "mainS078", // 用于判断修改了哪个模块
     isShowSelectModule: false, // 是否显示选择模块中的组件弹窗
   }),
+  persist: true,
 });
 
 export function useCommonStoreHook() {

src/views/screens/configs/SelectComponents.vue

@@ -2,6 +2,7 @@
   <el-drawer
     v-model="commonS.isShowSelectModule"
     :append-to-body="true"
+    :close-on-click-modal="false"
     :destroy-on-close="true"
     :show-close="false"
     size="50%"
@@ -47,7 +48,7 @@ const singleTableRef = ref<InstanceType<typeof ElTable>>();
 const setCurrent = (row?: ScreenComponent) => {
   singleTableRef.value && singleTableRef.value.setCurrentRow(row);
 };
-const handleCurrentChange = (val) => {
+const handleCurrentChange = (val: ScreenComponent) => {
   currentRow.value = val;
 };
 const tableData = ref<ScreenComponent[]>([]);
@@ -64,7 +65,13 @@ onMounted(() => {
 
 const handleSubmit = () => {
   if (currentRow.value && currentRow.value.key) {
-    commonS[commonS.moduleKey as string] = currentRow.value.key;
+    let key = commonS.moduleKey as string;
+    if (key in commonS) {
+      commonS[key] = currentRow.value.key;
+    } else {
+      ElMessage.error("请选择正确的组件, 组件的key不存在");
+    }
+
     commonS.isShowSelectModule = false;
   }
 };
@@ -74,4 +81,9 @@ const closeDialog = () => {
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.dialog-footer {
+  display: flex;
+  justify-content: start;
+}
+</style>

src/views/screens/configs/chartsConfig.ts

@@ -0,0 +1,26 @@
+export const allColors = [
+  "#FF6384",
+  "#36A2EB",
+  "#FFCE56",
+  "#4BC0C0",
+  "#E7E9ED",
+  "#F7464A",
+  "#4CAF50",
+  "#E91E63",
+  "#2196F3",
+  "#FFEB3B",
+  "#8BC34A",
+  "#FF9800",
+  "#795548",
+  "#9C27B0",
+  "#673AB7",
+  "#3F51B5",
+  "#00BCD4",
+  "#009688",
+  "#8BC34A",
+  "#FFC107",
+  "#795548",
+  "#9E9E9E",
+  "#607D8B",
+  "#009688",
+];

src/views/screens/configs/components.ts

@@ -11,14 +11,14 @@ export interface ScreenComponent {
 export const componentsDicts: { [key: string]: ScreenComponent } = {
   // Add your components here
   EquipmentMonitoring: {
-    name: "Equipment Monitoring",
+    name: "设备监控",
     component: EquipmentMonitoring,
     key: "EquipmentMonitoring",
     description:
       "This component shows the status of the equipment in real-time.",
   },
   ProductionSituation: {
-    name: "Production Situation",
+    name: "生产量情况",
     component: ProductionSituation,
     key: "ProductionSituation",
     description:

src/views/screens/configs/screenComHeader.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="screen-common-component">
+    <div class="screen-common-component-header" @dblclick="selectComponents">
+      {{ title }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useCommonStore } from "@/store";
+
+const commonS = useCommonStore();
+
+const props = defineProps({
+  moduleId: {
+    type: String,
+    required: true,
+  },
+  title: {
+    type: String,
+    required: false,
+  },
+  align: {
+    type: String,
+    default: "center",
+  },
+  titleSize: {
+    type: String,
+    default: "16px",
+  },
+});
+
+const selectComponents = () => {
+  commonS.moduleKey = props.moduleId;
+  commonS.isShowSelectModule = true;
+};
+</script>
+
+<style lang="scss" scoped>
+.screen-common-component-header {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: v-bind(align);
+  font-size: v-bind(titleSize);
+  height: 30px;
+  color: #fff;
+}
+</style>

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

@@ -1,15 +1,12 @@
 <template>
-  <div
-    class="screen-common-component"
-    style="background-color: pink"
-    @dbclick="selectComponents"
-  >
-    到付件爱神的箭佛爱打架发哦费{{ moduleId }}
+  <div class="screen-common-component">
+    <ScreenComHeader :module-id="moduleId" title="设备监控" />
   </div>
 </template>
 
 <script lang="ts" setup>
 import { useCommonStore } from "@/store";
+import ScreenComHeader from "@/views/screens/configs/screenComHeader.vue";
 
 const commonS = useCommonStore();
 

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

@@ -1,15 +1,12 @@
 <template>
-  <div
-    class="screen-common-component"
-    style="background-color: blue"
-    @click="selectComponents"
-  >
-    ProductionSituation{{ moduleId }}
+  <div class="screen-common-component">
+    <ScreenComHeader :module-id="moduleId" title="产品生产情况" />
   </div>
 </template>
 
 <script lang="ts" setup>
 import { useCommonStore } from "@/store";
+import ScreenComHeader from "@/views/screens/configs/screenComHeader.vue";
 
 const commonS = useCommonStore();