feat: 添加背靠背皮肤设置

base-manager-ui/admin/src/pages/basicset/surface/bkbSkin/BkbSkin.vue

+<template>
+  <div class="skin-box">
+    <!-- 背靠背 1920*1080 -->
+    <div
+      :id="componentsId"
+      class="across-skin"
+      v-if="resolution === '1920x1080'"
+      :style="{
+        background: filterItem('1', 0),
+      }"
+    >
+      <div class="surface-preview-main">
+        <div class="skin-header">
+          <h1 class="skin-header-title" :style="{ color: filterItem('2', 0) }">
+            背靠背评价交互系统
+          </h1>
+        </div>
+        <div class="skin-content">
+          <div class="skin-content-left">
+            <div class="flex left-top">
+              <div class="border"></div>
+              <div class="border"></div>
+            </div>
+            <div class="border left-bottom"></div>
+          </div>
+          <div class="skin-content-right border"></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 空数据显示 -->
+    <div class="empty flex aic jcc" v-else>
+      <a-empty
+        :image="require('../../../../assets/img/original.png')"
+        :image-style="{
+          height: '80px',
+        }"
+      >
+        <span slot="description"> <a href="#API">暂无皮肤模板</a> </span>
+      </a-empty>
+    </div>
+  </div>
+</template>
+
+<script>
+import { unifyResolution } from "@/utils";
+import { filterItems } from "@/utils";
+import { mapGetters } from "vuex";
+export default {
+  props: {
+    // imgItem: {
+    //   type: Array,
+    //   required: true,
+    //   default: () => {
+    //     return [];
+    //   },
+    // },
+    skinFieldList: {
+      type: Array,
+      required: true,
+      default: () => {
+        return [];
+      },
+    },
+    imageResolution: {
+      required: true,
+      default: "",
+    },
+    componentsId: {
+      required: true,
+      type: String,
+    },
+  },
+  data() {
+    return {
+      api: process.env.VUE_APP_API_IMG_URL,
+    };
+  },
+  computed: {
+    ...mapGetters("site", ["imageResolutions"]),
+    resolution() {
+      let data = filterItems(this.imageResolution, this.imageResolutions);
+      return unifyResolution(data);
+    },
+  },
+  methods: {
+    // 过滤属性类型
+    filterItem(type, index) {
+      let arr = this.skinFieldList.filter((v) => {
+        return v.remark == type;
+      });
+      if (arr.length) {
+        return this.filterValueType(arr[index]);
+      } else {
+        return "";
+      }
+    },
+    // 过滤属性值类型
+    filterValueType(info = {}) {
+      let value = "";
+      if (info.fieldType !== "" && info.fieldType == "1" && info.fieldValue) {
+        value = info.fieldValue;
+      } else if (
+        info.fieldType !== "" &&
+        info.fieldType == "2" &&
+        info.fieldValue
+      ) {
+        value = `url(${this.api + info.fieldValue})`;
+      }
+      return value;
+    },
+    // 过滤导航
+    filterNav(type) {
+      let arr = [];
+      arr = this.skinFieldList.filter((v) => {
+        return v.remark == type;
+      });
+      return arr;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.border {
+  border: 1px dashed #ececec;
+}
+.across-skin {
+  width: 1000px;
+  height: 562.5px;
+  color: #fff;
+  background-image: linear-gradient(#26c5ff, #2c66ff);
+  background-repeat: no-repeat !important;
+  background-position: center !important;
+  background-size: 100% 100% !important;
+  h1 {
+    color: #fff;
+    margin: 0px;
+  }
+  p {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0px;
+  }
+  .surface-preview-main {
+    width: 96%;
+    margin-left: 2%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    .skin-header {
+      display: flex;
+      height: 100px;
+      margin-bottom: 40px;
+      justify-content: center;
+      align-items: center;
+      .skin-header-title {
+        font-size: 22px;
+        font-weight: 600;
+        letter-spacing: 2px;
+      }
+    }
+    .skin-content {
+      flex: 1;
+      display: flex;
+      justify-content: flex-end;
+      width: 96%;
+      margin-left: 2%;
+      padding-bottom: 20px;
+      gap: 10px;
+      .skin-content-left {
+        flex: 1;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        .left-top {
+          height: 60px;
+          display: flex;
+          gap: 10px;
+          div {
+            flex: 1;
+            height: 100%;
+          }
+        }
+        .left-bottom {
+          flex: 1;
+        }
+      }
+
+      .skin-content-right {
+        width: 30%;
+        height: 100%;
+      }
+    }
+  }
+}
+</style>

base-manager-ui/admin/src/pages/basicset/surface/components/ShowBox.vue

@@ -65,6 +65,7 @@ import SelfService from "../selfservice/SelfService.vue";
 import DesSelfService from "../desSelfservice/DesSelfService.vue";
 import SignDevicekin from "../signdeviceskin/SignDeviceSkin.vue";
 import InfoDisSkin from "../infoDisSkin/InfoDisSkin.vue";
+import BkbSkin from "../bkbSkin/BkbSkin.vue";
 import DefaultShow from "../defaultshow/DefaultShow.vue";
 import { mapState, mapMutations } from "vuex";
 import { filterItems } from "@/utils";
@@ -81,6 +82,7 @@ const skinCompontens = {
   xxfbp: "InformationSkin",
   zmszzfwzd: "DesSelfService",
   xxgk: "InfoDisSkin",
+  bkb: "BkbSkin",
 };
 export default {
   components: {
@@ -96,6 +98,7 @@ export default {
     DesSelfService,
     SignDevicekin,
     InfoDisSkin,
+    BkbSkin,
     DefaultShow,
   },
   props: {},

base-manager-ui/admin/src/pages/basicset/surface/modal/AddSurface.vue

@@ -196,6 +196,7 @@ import SelfService from "../selfservice/SelfService.vue";
 import DesSelfService from "../desSelfservice/DesSelfService.vue";
 import SignDevicekin from "../signdeviceskin/SignDeviceSkin.vue";
 import InfoDisSkin from "../infoDisSkin/InfoDisSkin.vue";
+import BkbSkin from "../bkbSkin/BkbSkin.vue";
 import DefaultShow from "../defaultshow/DefaultShow.vue";
 import { uploadFile, skinSave, getTemplateList } from "@/services/surface";
 import html2canvas from "html2canvas";
@@ -214,6 +215,7 @@ const skinCompontens = {
   xxfbp: "InformationSkin",
   zmszzfwzd: "DesSelfService",
   xxgk: "InfoDisSkin",
+  bkb: "BkbSkin",
 };
 export default {
   components: {
@@ -229,6 +231,7 @@ export default {
     DesSelfService,
     SignDevicekin,
     InfoDisSkin,
+    BkbSkin,
     DefaultShow,
   },
   props: {