1.实现能够根据配置切换大屏组件的功能。

package.json

@@ -57,6 +57,7 @@
     "path-browserify": "^1.0.1",
     "path-to-regexp": "^6.2.1",
     "pinia": "^2.1.7",
+    "pinia-plugin-persistedstate": "^3.2.1",
     "sockjs-client": "1.6.1",
     "sortablejs": "^1.15.2",
     "stompjs": "^2.3.3",

src/router/index.ts

@@ -47,6 +47,12 @@ export const constantRoutes: RouteRecordRaw[] = [
     meta: { hidden: true },
   },
   {
+    path: "/mainScreen",
+    component: () => import("@/views/screens/mainScreen.vue"),
+    name: "mainScreen",
+    meta: { hidden: true },
+  },
+  {
     path: "/users",
     component: () => import("@/views/sets/users.vue"),
     name: "users",

src/store/modules/common.ts

@@ -7,6 +7,11 @@ export const useCommonStore = defineStore("commonStore", {
     isShowTable: false,
     tableType: 1,
     tableTitle: "",
+    //   大屏显示的组件key值，包含默认值
+    mainS077: "EquipmentMonitoring",
+    mainS078: "ProductionSituation",
+    moduleKey: "mainS078", // 用于判断修改了哪个模块
+    isShowSelectModule: false, // 是否显示选择模块中的组件弹窗
   }),
 });
 

src/styles/index.scss

@@ -42,3 +42,70 @@
   border-radius: 8px 8px 8px 8px;
   padding: 25px;
 }
+
+//大屏相关公共样式
+.screen-window {
+  width: 100%;
+  height: 100%;
+  //background-image: url("@/assets/images/screenBG1.png");
+  background-size: cover;
+  background-position: center;
+
+  .screen-header {
+    height: 80px;
+    display: flex;
+    align-items: end;
+    justify-content: space-between;
+    padding: 0 20px;
+    position: relative;
+  }
+
+  .header-back {
+
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    width: 50px;
+    height: 30px;
+
+
+  }
+
+  .screen-header-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: start;
+  }
+
+  .header-title {
+    font-size: 30px;
+    font-weight: bold;
+    line-height: 40px;
+    color: white;
+    text-align: center;
+    margin-top: 10px;
+
+  }
+}
+
+.screen-content {
+  width: 100%;
+  height: calc(100% - 80px);
+  display: flex;
+  padding: 15px;
+}
+
+.screen-common-box {
+  padding: 15px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.screen-common-component {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  background-color: #00a680;
+}

src/views/big-screens/datav/LabelTag.vue

@@ -62,7 +62,7 @@ export default {
     mergeConfig() {
       let { config, defaultConfig } = this;
 
-      this.mergedConfig = { ...config, ...defaultConfig };
+      this.mergedConfig = { ...defaultConfig, ...config };
     },
   },
 };

src/views/big-screens/datav/index.vue

@@ -44,9 +44,9 @@
             </div>
           </div>
 
-          <dv-border-box-4 class="rmc-bottom-container">
+          <dv-border-box-9 class="rmc-bottom-container">
             <Bottom-Charts />
-          </dv-border-box-4>
+          </dv-border-box-9>
         </div>
       </dv-border-box-1>
     </dv-full-screen-container>
@@ -128,7 +128,7 @@ export default {
   }
 
   .main-container {
-    height: calc(~"100% - 80px");
+    height: calc(100% - 160px);
 
     .border-box-content {
       padding: 20px;

src/views/screens/configs/SelectComponents.vue

@@ -0,0 +1,24 @@
+<template>
+  <el-drawer v-model="commonS.isShowSelectModule" :append-to-body="true">
+    <span @click="select1">组件1</span>
+    <span @click="select2">组件2</span>
+  </el-drawer>
+</template>
+
+<script lang="ts" setup>
+import { useCommonStore } from "@/store";
+
+const commonS = useCommonStore();
+
+const select1 = () => {
+  commonS.isShowSelectModule = false;
+  commonS[commonS.moduleKey as string] = "EquipmentMonitoring";
+};
+
+const select2 = () => {
+  commonS.isShowSelectModule = false;
+  commonS[commonS.moduleKey as string] = "ProductionSituation";
+};
+</script>
+
+<style lang="scss" scoped></style>

src/views/screens/configs/components.ts

@@ -0,0 +1,12 @@
+import EquipmentMonitoring from "@/views/screens/screen-components/EquipmentMonitoring.vue";
+import ProductionSituation from "@/views/screens/screen-components/ProductionSituation.vue";
+
+export const componentsDicts: { [key: string]: any } = {
+  // Add your components here
+  EquipmentMonitoring: EquipmentMonitoring,
+  ProductionSituation: ProductionSituation,
+};
+
+export const getComponetnByName = (name: string) => {
+  return componentsDicts[name];
+};

src/views/screens/headers/screenHeader.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="screen-header">
+    <Back class="header-back" color="#fff" @click="back" />
+    <dv-decoration-8 style="width: 300px; height: 30px" />
+    <div class="screen-header-item">
+      <div class="header-title">{{ title }}</div>
+      <dv-decoration-5 style="width: 500px; height: 30px" />
+    </div>
+    <dv-decoration-8 :reverse="true" style="width: 300px; height: 30px" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Back } from "@element-plus/icons-vue";
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: "",
+  },
+});
+
+const router = useRouter();
+const back = () => {
+  router.back();
+};
+</script>
+
+<style lang="scss" scoped></style>

src/views/screens/mainScreen.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="screen-window">
+    <dv-full-screen-container>
+      <ScreenHeader title="综合监控大屏" />
+      <div class="screen-content">
+        <dv-border-box-9 class="zhleft screen-common-box">
+          dv-border-box-9
+        </dv-border-box-9>
+        <div class="spsace"></div>
+        <div class="zhright">
+          <div class="top column-item">dddd</div>
+          <div class="middle column-item">表格</div>
+          <div class="bottom column-item">
+            <dv-border-box-12 class="item-left screen-common-box">
+              <component :is="mainS077" moduleId="mainS077" />
+            </dv-border-box-12>
+            <dv-border-box-4
+              :color="['red', 'green']"
+              :reverse="true"
+              class="item-right screen-common-box"
+            >
+              <component :is="mainS078" moduleId="mainS078" />
+            </dv-border-box-4>
+          </div>
+        </div>
+      </div>
+    </dv-full-screen-container>
+    <SelectComponents />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import ScreenHeader from "@/views/screens/headers/screenHeader.vue";
+import { getComponetnByName } from "@/views/screens/configs/components";
+import SelectComponents from "@/views/screens/configs/SelectComponents.vue";
+import { useCommonStore } from "@/store";
+
+const commonS = useCommonStore();
+
+const mainS077 = computed(() => {
+  return getComponetnByName(commonS.mainS077);
+});
+const mainS078 = computed(() => {
+  return getComponetnByName(commonS.mainS078);
+});
+</script>
+
+<style lang="scss" scoped>
+.zhleft {
+  width: 500px;
+  height: calc(100% - 120px);
+}
+
+.spsace {
+  width: 15px;
+}
+
+.zhright {
+  width: 100%;
+  height: calc(100% - 120px);
+  display: flex;
+  flex-direction: column;
+
+  .column-item {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+  }
+
+  .item-left {
+    width: 65%;
+    height: 100%;
+  }
+
+  .item-right {
+    width: 35%;
+    height: 100%;
+  }
+}
+</style>

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

@@ -0,0 +1,29 @@
+<template>
+  <div
+    class="screen-common-component"
+    style="background-color: pink"
+    @click="selectComponents"
+  >
+    到付件爱神的箭佛爱打架发哦费{{ moduleId }}
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useCommonStore } from "@/store";
+
+const commonS = useCommonStore();
+
+const props = defineProps({
+  moduleId: {
+    type: String,
+    required: true,
+  },
+});
+
+const selectComponents = () => {
+  commonS.moduleKey = props.moduleId;
+  commonS.isShowSelectModule = true;
+};
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,29 @@
+<template>
+  <div
+    class="screen-common-component"
+    style="background-color: blue"
+    @click="selectComponents"
+  >
+    ProductionSituation{{ moduleId }}
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useCommonStore } from "@/store";
+
+const commonS = useCommonStore();
+
+const props = defineProps({
+  moduleId: {
+    type: String,
+    required: true,
+  },
+});
+
+const selectComponents = () => {
+  commonS.isShowSelectModule = true;
+  commonS.moduleKey = props.moduleId;
+};
+</script>
+
+<style lang="scss" scoped></style>