perf: 修改皮肤分辨率适配

base-manager-ui/admin/src/pages/basicset/surface/appraiseskin/AppraiseSkin.vue

@@ -4,7 +4,7 @@
     <div
       :id="componentsId"
       class="call-out-skin-across"
-      v-if="imageResolution === '1'"
+      v-if="resolution === '1920x1080'"
       :style="{
         background: filterItem('1', 0),
       }"
@@ -76,6 +76,9 @@
 </template>
 
 <script>
+import { unifyResolution } from "@/utils";
+import { filterItems } from "@/utils";
+import { mapGetters } from "vuex";
 export default {
   props: {
     skinFieldList: {
@@ -87,7 +90,7 @@ export default {
     },
     imageResolution: {
       required: true,
-      default: "1",
+      default: "",
     },
     componentsId: {
       required: true,
@@ -99,36 +102,14 @@ export default {
       api: process.env.VUE_APP_API_IMG_URL,
     };
   },
+  computed: {
+    ...mapGetters("site", ["imageResolutions"]),
+    resolution() {
+      let data = filterItems(this.imageResolution, this.imageResolutions);
+      return unifyResolution(data);
+    },
+  },
   methods: {
-    // 过滤图片
-    // filterImg(val) {
-    //   let url = "";
-    //   this.skinFieldList
-    //     .filter((v) => {
-    //       return v.fieldType === "2";
-    //     })
-    //     .forEach((v) => {
-    //       if (v.fieldName !== "" && v.fieldName === val) {
-    //         url = v.fieldValue;
-    //       }
-    //     });
-    //   return url;
-    // },
-    // // 过滤颜色
-    // filterColor(val) {
-    //   let str = "";
-    //   this.skinFieldList
-    //     .filter((v) => {
-    //       return v.fieldType === "1";
-    //     })
-    //     .forEach((v) => {
-    //       if (v.fieldName !== "" && v.fieldName === val) {
-    //         str = v.fieldValue;
-    //       }
-    //     });
-    //   return str;
-    // },
-
     // 过滤属性类型
     filterItem(type, index) {
       let arr = this.skinFieldList.filter((v) => {

base-manager-ui/admin/src/pages/basicset/surface/calloutskin/CallOutSkin.vue

@@ -4,7 +4,7 @@
     <div
       :id="componentsId"
       class="call-out-skin-across"
-      v-if="imageResolution === '1'"
+      v-if="resolution === '1920x1080'"
       :style="{
         background: filterItem('1', 0),
       }"
@@ -131,6 +131,9 @@
 </template>
 
 <script>
+import { unifyResolution } from "@/utils";
+import { filterItems } from "@/utils";
+import { mapGetters } from "vuex";
 export default {
   props: {
     skinFieldList: {
@@ -142,7 +145,7 @@ export default {
     },
     imageResolution: {
       required: true,
-      default: "1",
+      default: "",
     },
     componentsId: {
       required: true,
@@ -154,6 +157,13 @@ export default {
       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) {

base-manager-ui/admin/src/pages/basicset/surface/centralizeskin/CentralizeSkin.vue

@@ -4,7 +4,7 @@
     <div
       class="centralize-across"
       :id="componentsId"
-      v-if="imageResolution === '1'"
+      v-if="resolution === '1920x1080'"
       :style="{
         background: filterItem('1', 0),
       }"
@@ -84,7 +84,7 @@
     <div
       class="vertical-skin"
       :id="componentsId"
-      v-else-if="imageResolution === '2'"
+      v-else-if="resolution === '1080x1920'"
       :style="{
         background: filterItem('1', 0),
       }"
@@ -195,6 +195,9 @@
 </template>
 
 <script>
+import { unifyResolution } from "@/utils";
+import { filterItems } from "@/utils";
+import { mapGetters } from "vuex";
 export default {
   props: {
     skinFieldList: {
@@ -206,7 +209,7 @@ export default {
     },
     imageResolution: {
       required: true,
-      default: "1",
+      default: "",
     },
     componentsId: {
       required: true,
@@ -250,36 +253,14 @@ export default {
       ],
     };
   },
+  computed: {
+    ...mapGetters("site", ["imageResolutions"]),
+    resolution() {
+      let data = filterItems(this.imageResolution, this.imageResolutions);
+      return unifyResolution(data);
+    },
+  },
   methods: {
-    // 过滤图片
-    // filterImg(val) {
-    //   let url = "";
-    //   this.skinFieldList
-    //     .filter((v) => {
-    //       return v.fieldType === "2";
-    //     })
-    //     .forEach((v) => {
-    //       if (v.fieldName !== "" && v.fieldName === val) {
-    //         url = v.fieldValue;
-    //       }
-    //     });
-    //   return url;
-    // },
-    // // 过滤颜色
-    // filterColor(val) {
-    //   let str = "";
-    //   this.skinFieldList
-    //     .filter((v) => {
-    //       return v.fieldType === "1";
-    //     })
-    //     .forEach((v) => {
-    //       if (v.fieldName !== "" && v.fieldName === val) {
-    //         str = v.fieldValue;
-    //       }
-    //     });
-    //   return str;
-    // },
-
     // 过滤属性类型
     filterItem(type, index) {
       let arr = this.skinFieldList.filter((v) => {

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

@@ -22,9 +22,12 @@
             v-for="(v, i) in previewList"
             :key="v.id"
           >
+            <!-- <div class="resolution">
+              {{ v.imageResolution }}
+            </div> -->
             <img :src="v.previewImagePath" />
             <div class="name">
-              {{ v.name }}
+              {{ v.name }}-{{ filterItems(v.imageResolution, imageResolution) }}
             </div>
           </div>
         </div>
@@ -44,6 +47,7 @@
 import { getSkinList } from "@/services/surface";
 import { Empty } from "ant-design-vue";
 import { mapMutations, mapState } from "vuex";
+import { filterItems } from "@/utils";
 export default {
   props: {
     classifyList: {
@@ -56,6 +60,7 @@ export default {
   },
   data() {
     return {
+      filterItems,
       simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
       categoryId: "", // 分类ID
       previewList: [], // 皮肤列表
@@ -63,7 +68,7 @@ export default {
     };
   },
   computed: {
-    ...mapState("site", ["curSkinIndex", "curProduct"]),
+    ...mapState("site", ["curSkinIndex", "curProduct", "imageResolution"]),
   },
   watch: {
     curProduct(newVal) {
@@ -190,18 +195,31 @@ export default {
         height: 100%;
         object-fit: contain;
       }
-      .name {
+      .resolution {
         width: 100%;
         background-color: rgba(0, 0, 0, 0.3);
         color: #fff;
         position: absolute;
         left: 0px;
-        bottom: 0px;
+        top: 0px;
         text-align: center;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
       }
+      .name {
+        width: 100%;
+        background-color: rgba(0, 0, 0, 0.3);
+        color: #fff;
+        position: absolute;
+        left: 0px;
+        bottom: 0px;
+        text-align: center;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        overflow: hidden;
+      }
     }
     .active {
       border: 4px solid #ff8522;

base-manager-ui/admin/src/pages/basicset/surface/defaultshow/DefaultShow.vue

@@ -4,7 +4,7 @@
     <div
       :id="componentsId"
       class="across-skin"
-      v-if="imageResolution === '1'"
+      v-if="resolution === '1920x1080'"
       :style="{
         background: filterItem('1', 0),
       }"
@@ -13,7 +13,7 @@
     <div
       class="vertical-skin"
       :id="componentsId"
-      v-else-if="imageResolution === '2'"
+      v-else-if="resolution === '1080x1920'"
       :style="{
         background: filterItem('1', 0),
       }"
@@ -33,6 +33,9 @@
 </template>
 
 <script>
+import { unifyResolution } from "@/utils";
+import { filterItems } from "@/utils";
+import { mapGetters } from "vuex";
 export default {
   props: {
     // imgItem: {
@@ -51,7 +54,7 @@ export default {
     },
     imageResolution: {
       required: true,
-      default: "1",
+      default: "",
     },
     componentsId: {
       required: true,
@@ -63,6 +66,13 @@ export default {
       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) {

base-manager-ui/admin/src/pages/basicset/surface/desSelfservice/DesSelfService.vue

@@ -3,7 +3,7 @@
     <!-- 桌面自助服务终端 横板 -->
     <div
       :id="componentsId"
-      v-if="imageResolution === '1'"
+      v-if="resolution === '1920x1080'"
       class="across-skin flex flexc aic"
       :style="{
         background: filterItem('1', 0),
@@ -95,6 +95,9 @@
 </template>
 
 <script>
+import { unifyResolution } from "@/utils";
+import { filterItems } from "@/utils";
+import { mapGetters } from "vuex";
 export default {
   props: {
     skinFieldList: {
@@ -106,13 +109,20 @@ export default {
     },
     imageResolution: {
       required: true,
-      default: "1",
+      default: "",
     },
     componentsId: {
       required: true,
       type: String,
     },
   },
+  computed: {
+    ...mapGetters("site", ["imageResolutions"]),
+    resolution() {
+      let data = filterItems(this.imageResolution, this.imageResolutions);
+      return unifyResolution(data);
+    },
+  },
   data() {
     return {
       api: process.env.VUE_APP_API_IMG_URL,

base-manager-ui/admin/src/pages/basicset/surface/infoDisSkin/InfoDisSkin.vue

@@ -4,7 +4,7 @@
     <div
       class="vertical-skin flex flexc aic"
       :id="componentsId"
-      v-if="imageResolution === '2'"
+      v-if="resolution === '1080x1920'"
       :style="{
         background: filterItem('1', 0),
       }"
@@ -51,6 +51,9 @@
 </template>
 
 <script>
+import { unifyResolution } from "@/utils";
+import { filterItems } from "@/utils";
+import { mapGetters } from "vuex";
 export default {
   props: {
     // imgItem: {
@@ -69,7 +72,7 @@ export default {
     },
     imageResolution: {
       required: true,
-      default: "1",
+      default: "",
     },
     componentsId: {
       required: true,
@@ -81,6 +84,13 @@ export default {
       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) {

base-manager-ui/admin/src/pages/basicset/surface/informationskin/InformationSkin.vue

@@ -4,7 +4,7 @@
     <div
       :id="componentsId"
       class="across-skin flex flexc"
-      v-if="imageResolution === '1'"
+      v-if="resolution === '1920x1080'"
     >
       <div
         class="header"
@@ -56,7 +56,7 @@
     <div
       :id="componentsId"
       class="vertical-skin flex flexc"
-      v-else-if="imageResolution === '2'"
+      v-else-if="resolution === '1080x1920'"
     >
       <div
         class="header"
@@ -69,7 +69,7 @@
       </div>
       <div class="main">
         <div class="left">
-          <img class="banner" src="../../../../assets/img/banner2.png" />
+          <img class="banner" src="../../../../assets/img/pjq.png" />
         </div>
         <div class="right">
           <img class="banner" src="../../../../assets/img/banner3.png" />
@@ -110,6 +110,9 @@
 </template>
 
 <script>
+import { unifyResolution } from "@/utils";
+import { filterItems } from "@/utils";
+import { mapGetters } from "vuex";
 export default {
   props: {
     skinFieldList: {
@@ -121,7 +124,7 @@ export default {
     },
     imageResolution: {
       required: true,
-      default: "1",
+      default: "",
     },
     componentsId: {
       required: true,
@@ -133,6 +136,13 @@ export default {
       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) {

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

@@ -244,7 +244,7 @@ export default {
       formData: {
         categoryId: undefined, // 所属种类
         name: "", // 皮肤名称
-        imageResolution: "1", // 分辨率
+        imageResolution: undefined, // 分辨率
         skinFieldList: [], // 字段属性列表
         previewImagePath: "", // 预览图地址
       },
@@ -469,6 +469,7 @@ export default {
     onAdd() {
       Object.assign(this.formData, this.$options.data().formData);
       this.formData.id && this.$delete(this.formData, "id");
+      this.formData.imageResolution = Object.keys(this.imageResolution)[0];
     },
     // 编辑
     onEdit(row) {

base-manager-ui/admin/src/pages/basicset/surface/queuingSkin/LandscapeMode.vue

@@ -4,7 +4,7 @@
     <div
       :id="componentsId"
       class="across-skin"
-      v-if="imageResolution === '1'"
+      v-if="resolution === '1920x1080'"
       :style="{
         background: filterItem('1', 0),
       }"
@@ -73,7 +73,7 @@
     <div
       class="vertical-skin"
       :id="componentsId"
-      v-else-if="imageResolution === '2'"
+      v-else-if="resolution === '1080x1920'"
       :style="{
         background: filterItem('1', 0),
       }"
@@ -87,7 +87,7 @@
         </div>
       </div>
       <div class="banner">
-        <img src="../../../../assets/img/Banner.png" alt="" />
+        <img src="../../../../assets/img/pjq.png" alt="" />
       </div>
       <div class="meuns flex flexwrap jcb">
         <div
@@ -150,6 +150,9 @@
 </template>
 
 <script>
+import { unifyResolution } from "@/utils";
+import { filterItems } from "@/utils";
+import { mapGetters } from "vuex";
 export default {
   props: {
     // imgItem: {
@@ -168,7 +171,7 @@ export default {
     },
     imageResolution: {
       required: true,
-      default: "1",
+      default: "",
     },
     componentsId: {
       required: true,
@@ -180,6 +183,13 @@ export default {
       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) {

base-manager-ui/admin/src/pages/basicset/surface/sampleFormSkin/SampleFormSkin.vue

@@ -3,7 +3,7 @@
     <!-- 样表机 横板 -->
     <div
       :id="componentsId"
-      v-if="imageResolution === '1'"
+      v-if="resolution === '1920x1080'"
       class="sample_form_skin flex flexc aic"
       :style="{
         background: filterItem('1', 0),
@@ -133,6 +133,9 @@
 </template>
 
 <script>
+import { unifyResolution } from "@/utils";
+import { filterItems } from "@/utils";
+import { mapGetters } from "vuex";
 export default {
   props: {
     skinFieldList: {
@@ -144,7 +147,7 @@ export default {
     },
     imageResolution: {
       required: true,
-      default: "1",
+      default: "",
     },
     componentsId: {
       required: true,
@@ -156,6 +159,13 @@ export default {
       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) {

base-manager-ui/admin/src/pages/basicset/surface/selfservice/SelfService.vue

@@ -3,7 +3,7 @@
     <!-- 自助服务终端 横板 -->
     <div
       :id="componentsId"
-      v-if="imageResolution === '1'"
+      v-if="resolution === '1920x1080'"
       class="across-skin flex flexc aic"
       :style="{
         background: filterItem('1', 0),
@@ -95,6 +95,9 @@
 </template>
 
 <script>
+import { unifyResolution } from "@/utils";
+import { filterItems } from "@/utils";
+import { mapGetters } from "vuex";
 export default {
   props: {
     skinFieldList: {
@@ -106,7 +109,7 @@ export default {
     },
     imageResolution: {
       required: true,
-      default: "1",
+      default: "",
     },
     componentsId: {
       required: true,
@@ -118,6 +121,13 @@ export default {
       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) {

base-manager-ui/admin/src/pages/basicset/surface/signdeviceskin/SignDeviceSkin.vue

@@ -3,7 +3,7 @@
     <!-- 导视机 横板 -->
     <div
       :id="componentsId"
-      v-if="imageResolution === '1'"
+      v-if="resolution === '1920x1080'"
       class="across-skin flex flexc aic"
     >
       <!-- 头部 -->
@@ -74,6 +74,9 @@
 </template>
 
 <script>
+import { unifyResolution } from "@/utils";
+import { filterItems } from "@/utils";
+import { mapGetters } from "vuex";
 export default {
   props: {
     skinFieldList: {
@@ -85,7 +88,7 @@ export default {
     },
     imageResolution: {
       required: true,
-      default: "1",
+      default: "",
     },
     componentsId: {
       required: true,
@@ -97,6 +100,13 @@ export default {
       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) {

base-manager-ui/admin/src/pages/basicset/surface/windowskin/WindowSkin.vue

@@ -4,7 +4,7 @@
     <div
       :id="componentsId"
       class="window-skin-across flex flexc jcb aic"
-      v-if="imageResolution === '1'"
+      v-if="resolution === '1920x1080'"
       :style="{
         background: filterItem('1', 0),
       }"
@@ -64,6 +64,9 @@
 </template>
 
 <script>
+import { unifyResolution } from "@/utils";
+import { filterItems } from "@/utils";
+import { mapGetters } from "vuex";
 export default {
   props: {
     skinFieldList: {
@@ -75,7 +78,7 @@ export default {
     },
     imageResolution: {
       required: true,
-      default: "1",
+      default: "",
     },
     componentsId: {
       required: true,
@@ -87,6 +90,13 @@ export default {
       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) {

base-manager-ui/admin/src/pages/basicset/surface/writeFormSkin/WriteFormSkin.vue

@@ -3,7 +3,7 @@
     <!-- 填单机 横板 -->
     <div
       :id="componentsId"
-      v-if="imageResolution === '1'"
+      v-if="resolution === '1920x1080'"
       class="write_form_skin flex flexc aic"
       :style="{
         background: filterItem('1', 0),
@@ -155,6 +155,9 @@
 </template>
 
 <script>
+import { unifyResolution } from "@/utils";
+import { filterItems } from "@/utils";
+import { mapGetters } from "vuex";
 export default {
   props: {
     skinFieldList: {
@@ -166,7 +169,7 @@ export default {
     },
     imageResolution: {
       required: true,
-      default: "1",
+      default: "",
     },
     componentsId: {
       required: true,
@@ -178,6 +181,13 @@ export default {
       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) {

base-manager-ui/admin/src/store/modules/site.js

@@ -39,6 +39,9 @@ export default {
     siteId(state) {
       return state.siteId;
     },
+    imageResolutions(state) {
+      return state.imageResolution;
+    },
   },
   mutations: {
     SET_path(state, path) {

base-manager-ui/admin/src/utils/index.js

@@ -17,3 +17,7 @@ export const transverter = (obj) => {
     };
   });
 };
+// 统一分辨率格式
+export const unifyResolution = (resolution) => {
+  return resolution.replace(/[xX*]/, "x");
+};