feat:新增桌面自助服务皮肤设置

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

@@ -17,7 +17,7 @@
         <div
           class="preview-item"
           @click="changePreview(i, v)"
-          :class="{ active: i === isActive }"
+          :class="{ active: i === curSkinIndex }"
           v-for="(v, i) in previewList"
           :key="v.id"
         >
@@ -38,7 +38,7 @@
 <script>
 import { getSkinList } from "@/services/surface";
 import { Empty } from "ant-design-vue";
-// import { mapMutations } from "vuex";
+import { mapMutations, mapState } from "vuex";
 export default {
   props: {
     classifyList: {
@@ -51,41 +51,34 @@ export default {
   },
   data() {
     return {
-      isActive: 0,
       simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
       categoryId: "", // 分类ID
       facilityInfo: {}, // 设备信息
       previewList: [], // 皮肤列表
     };
   },
+  computed: {
+    ...mapState("site", ["curSkinIndex"]),
+  },
   created() {
     // this.getSkinList();
     this.$bus.$off(["delSkin"]);
     this.$bus.$on("delSkin", (index) => {
       this.previewList.splice(index, 1);
       if (index > 0) {
-        this.isActive = index - 1;
-        this.$bus.$emit(
-          "selectPreview",
-          this.previewList[index - 1],
-          index - 1
-        );
+        this.SET_curSkin(this.previewList[index - 1]);
+        this.SET_curSkinIndex(index - 1);
       } else {
-        this.$bus.$emit("selectPreview", this.previewList[0], 0);
+        this.SET_curSkin(this.previewList[0]);
       }
     });
   },
   methods: {
-    // ...mapMutations(["SET_imageResolution"]),
-    // 对象转对象数组
-    transverter(obj) {
-      return Object.keys(obj).map((v) => {
-        return {
-          id: v,
-          name: obj[v],
-        };
-      });
-    },
+    ...mapMutations("site", [
+      "SET_imageResolution",
+      "SET_curSkin",
+      "SET_curSkinIndex",
+    ]),
     // 获取设备信息
     getFacilityInfo(info) {
       this.facilityInfo = info;
@@ -103,17 +96,20 @@ export default {
       });
       let { imageResolution } = res.data.dict;
       let { data } = res.data.data;
-      this.$store.commit(
-        "site/SET_imageResolution",
-        this.transverter(imageResolution)
-      );
-      // this.SET_imageResolution(this.transverter(imageResolution));
+      this.SET_imageResolution(imageResolution);
       this.previewList = data;
-      this.$bus.$emit("selectPreview", this.previewList[0], 0);
+      if (data.length) {
+        this.SET_curSkin(this.previewList[0]);
+        this.SET_curSkinIndex(0);
+      } else {
+        this.SET_curSkin({});
+        this.SET_curSkinIndex(0);
+      }
     },
     // 选取预览图
     changePreview(index, row) {
-      this.isActive = index;
+      this.SET_curSkin(row);
+      this.SET_curSkinIndex(index);
       this.$bus.$emit("selectPreview", row, index);
     },
     // 新增
@@ -137,6 +133,10 @@ export default {
       }
     },
   },
+  beforeDestroy() {
+    this.SET_curSkin({});
+    this.SET_curSkinIndex(0);
+  },
 };
 </script>
 

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

 <template>
   <div class="show">
-    <div class="show-content" v-if="skinInfo.id">
+    <div class="show-content" v-if="curSkin.id">
       <div class="show-header">
-        <h2 class="show-titlw">{{ skinInfo.name }}</h2>
+        <h2 class="show-titlw">{{ curSkin.name }}</h2>
         <p>
           更新时间：<span style="margin-right: 20px">{{
-            skinInfo.updateTime | dateFormat
+            curSkin.updateTime | dateFormat
           }}</span>
           支持分辨率：<span
-            >{{ filterImageResolution(skinInfo.imageResolution) }}
+            >{{ filterItems(curSkin.imageResolution, imageResolution) }}
           </span>
         </p>
       </div>
@@ -16,8 +16,8 @@
         <component
           conponentsId="skinInfo"
           :is="component"
-          :imageResolution="skinInfo.imageResolution"
-          :skinFieldList="skinInfo.skinFieldList"
+          :imageResolution="curSkin.imageResolution"
+          :skinFieldList="curSkin.skinFieldList"
         ></component>
       </div>
       <div class="show-btn flex aic jcc">
@@ -25,7 +25,7 @@
           <a-button class="edit-btn" @click="editSurface"
             >修改皮肤参数</a-button
           >
-          <a-button type="danger" @click="handleClose(skinInfo.id)"
+          <a-button type="danger" @click="handleClose(curSkin.id)"
             >删除皮肤</a-button
           >
         </a-space>
@@ -54,6 +54,9 @@ import SampleFormSkin from "../sampleFormSkin/SampleFormSkin.vue";
 import WriteFormSkin from "../writeFormSkin/WriteFormSkin.vue";
 import InformationSkin from "../informationskin/InformationSkin.vue";
 import SelfService from "../selfservice/SelfService.vue";
+import DesSelfService from "../desSelfservice/DesSelfService.vue";
+import { mapState, mapMutations } from "vuex";
+import { filterItems } from "@/utils";
 export default {
   components: {
     LandscapeMode,
@@ -65,26 +68,21 @@ export default {
     WriteFormSkin,
     InformationSkin,
     SelfService,
+    DesSelfService,
   },
   props: {},
   data() {
     return {
+      filterItems,
       skinInfo: {},
-      index: "",
     };
   },
-  created() {
-    this.$bus.$off(["selectPreview"]);
-    this.$bus.$on("selectPreview", (row, index) => {
-      this.skinInfo = { ...row };
-      this.index = index;
-      console.log(this.skinInfo);
-    });
-  },
+  created() {},
   computed: {
+    ...mapState("site", ["imageResolution", "curSkin", "curSkinIndex"]),
     component() {
       let str = "";
-      switch (this.skinInfo.productName) {
+      switch (this.curSkin.productName) {
         case "排号机":
           str = "LandscapeMode";
           break;
@@ -115,39 +113,20 @@ export default {
         case "信息发布终端":
           str = "InformationSkin";
           break;
+        case "桌面式自助终端":
+          str = "DesSelfService";
+          break;
       }
       return str;
     },
-    displayer() {
-      return this.$store.state.site.imageResolution;
-    },
-  },
-  filters: {
-    filterScreen(val) {
-      if (val === "1") {
-        return "1920*1080";
-      } else if (val === "2") {
-        return "1080*1920";
-      } else {
-        return "1280*1280";
-      }
-    },
   },
+
   methods: {
-    // 过滤分辨率显示
-    filterImageResolution(val) {
-      let str = "";
-      this.displayer.forEach((v) => {
-        if (val == v.id) {
-          str = v.name;
-        }
-      });
-      return str;
-    },
+    ...mapMutations("site", ["SET_curSkinIndex"]),
     // 编辑皮肤
     editSurface() {
-      if (this.skinInfo.id) {
-        this.$emit("editSkin", this.skinInfo);
+      if (this.curSkin.id) {
+        this.$emit("editSkin", this.curSkin);
       } else {
         this.$message.warning("请先选择皮肤");
       }
@@ -169,7 +148,7 @@ export default {
           let { code, msg } = res.data;
           if (code === 1) {
             _this.$message.success(msg);
-            _this.$bus.$emit("delSkin", _this.index);
+            _this.$bus.$emit("delSkin", _this.curSkinIndex);
           } else {
             _this.$message.error(msg);
           }

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

+<template>
+  <div class="skin-box">
+    <!-- 桌面自助服务终端 横板 -->
+    <div
+      :id="conponentsId"
+      v-if="imageResolution === '1'"
+      class="across-skin flex flexc aic"
+      :style="{
+        background: filterItem('1', 0),
+      }"
+    >
+      <!-- 头部 -->
+      <div class="header flex aic jcb">
+        <div class="left flex aic">
+          <div
+            class="title"
+            :style="{
+              color: filterItem('2', 0),
+            }"
+          >
+            自助服务终端
+          </div>
+        </div>
+        <div
+          class="right flex aic"
+          :style="{
+            color: filterItem('3', 0),
+          }"
+        >
+          <div class="time">10:32</div>
+          <div class="flex flexc">
+            <span>2023/02/16</span>
+            <span>星期四</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="main flex aic jcb flex1">
+        <div class="left">
+          <div class="top">
+            <div class="search-box">
+              <div class="search">请输入你想查询的内容关键字</div>
+              <div
+                class="search_btn"
+                :style="{
+                  color: filterItem('7', 0),
+                  background: filterItem('8', 0),
+                }"
+              >
+                搜索
+              </div>
+            </div>
+            <div class="banner flex aic jcc">banner</div>
+          </div>
+          <div class="bottom">新闻区</div>
+        </div>
+        <div class="right flex aic jcc">应用展示区</div>
+      </div>
+      <!-- 底部 -->
+      <div class="footer mt20">
+        <div
+          class="footer-item footer-item1"
+          :style="{
+            background: filterItem('7', 0),
+          }"
+        >
+          首页
+        </div>
+        <div class="footer-item">服务</div>
+        <div class="footer-item">互动</div>
+        <div class="footer-item">我的</div>
+        <div
+          class="footer-item footer-item5"
+          :style="{
+            color: filterItem('7', 0),
+            background: filterItem('8', 0),
+          }"
+        >
+          登录/注册
+        </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>
+export default {
+  props: {
+    skinFieldList: {
+      type: Array,
+      required: true,
+      default: () => {
+        return [];
+      },
+    },
+    imageResolution: {
+      required: true,
+      default: "1",
+    },
+    conponentsId: {
+      required: true,
+      type: String,
+    },
+  },
+  data() {
+    return {
+      api: process.env.VUE_APP_API_IMG_URL,
+    };
+  },
+  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;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.across-skin {
+  width: 1000px;
+  height: 562.5px;
+  background: linear-gradient(#26c5ff, #2c66ff);
+  background-repeat: no-repeat !important ;
+  background-position: center !important ;
+  background-size: cover !important ;
+  .header {
+    width: 100%;
+    color: #fff;
+    padding: 20px;
+
+    .title {
+      font-size: 30px;
+      font-weight: 600;
+    }
+    .right {
+      .time {
+        font-size: 26px;
+        font-weight: 600;
+        margin-right: 10px;
+      }
+    }
+  }
+  .main {
+    width: 100%;
+    padding: 20px;
+    margin-top: 10px;
+    color: #fff;
+    .left {
+      width: 39%;
+      height: 100%;
+      padding: 10px;
+      border-radius: 4px;
+      border: 1px dashed #ececec;
+      .top {
+        height: 59%;
+        display: flex;
+        flex-direction: column;
+        .search-box {
+          height: 40px;
+          padding: 0px 4px;
+          margin-bottom: 10px;
+          border-radius: 4px;
+          background-color: #fff;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          .search {
+            color: #ccc;
+          }
+          .search_btn {
+            width: 60px;
+            height: 36px;
+            border-radius: 4px;
+            background-color: #dee9ff;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            color: #206eff;
+          }
+        }
+        .banner {
+          flex: 0.9;
+          border: 1px dashed #ececec;
+          border-radius: 4px;
+        }
+      }
+      .bottom {
+        height: 39%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: 1px dashed #ececec;
+      }
+    }
+    .right {
+      width: 59%;
+      height: 100%;
+      border-radius: 4px;
+      border: 1px dashed #ececec;
+    }
+  }
+  .footer {
+    width: 100%;
+    height: 60px;
+    display: flex;
+    justify-content: flex-end;
+    background-color: #fff;
+    .footer-item1 {
+      color: #fff;
+      background-color: #206eff;
+    }
+    .footer-item {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 160px;
+      height: 100%;
+      border-left: 1px solid #ececec;
+      border-right: 1px solid #ececec;
+      font-size: 20px;
+    }
+    .footer-item5 {
+      color: #206eff;
+      background-color: #dee9ff;
+    }
+  }
+}
+</style>
\ No newline at end of file

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

@@ -71,11 +71,11 @@
                     v-model="formData.imageResolution"
                   >
                     <a-select-option
-                      v-for="v in displayer"
-                      :key="v.id"
-                      :value="v.id"
+                      v-for="(v, key) in imageResolution"
+                      :key="key"
+                      :value="key"
                     >
-                      {{ v.name }}
+                      {{ v }}
                     </a-select-option>
                   </a-select>
                 </a-form-model-item>
@@ -187,10 +187,12 @@ import AppraiseSkin from "../appraiseskin/AppraiseSkin.vue";
 import SampleFormSkin from "../sampleFormSkin/SampleFormSkin.vue";
 import WriteFormSkin from "../writeFormSkin/WriteFormSkin.vue";
 import InformationSkin from "../informationskin/InformationSkin.vue";
-import SelfService from "../selfservice/SelfService.vue"
+import SelfService from "../selfservice/SelfService.vue";
+import DesSelfService from "../desSelfservice/DesSelfService.vue";
 import { uploadFile, skinSave, getTemplateList } from "@/services/surface";
 import html2canvas from "html2canvas";
 import { Empty } from "ant-design-vue";
+import { mapState } from "vuex";
 
 export default {
   components: {
@@ -202,7 +204,8 @@ export default {
     SampleFormSkin,
     WriteFormSkin,
     InformationSkin,
-    SelfService
+    SelfService,
+    DesSelfService,
   },
   props: {
     isShow: {
@@ -295,12 +298,13 @@ export default {
         case "信息发布终端":
           str = "InformationSkin";
           break;
+        case "桌面式自助终端":
+          str = "DesSelfService";
+          break;
       }
       return str;
     },
-    displayer() {
-      return this.$store.state.site.imageResolution;
-    },
+    ...mapState("site", ["imageResolution"]),
   },
   created() {},
   watch: {

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

@@ -9,6 +9,8 @@ export default {
     token: "",
     userInfo: {}, // 用户信息
     appDict: {}, // 应用字典
+    curSkin: {}, // 当前选中预览皮肤
+    curSkinIndex: 0, // 当前选中皮肤索引
   },
   getters: {
     SiteTree(state) {
@@ -31,9 +33,15 @@ export default {
     },
   },
   mutations: {
+    SET_curSkinIndex(state, curSkinIndex) {
+      state.curSkinIndex = curSkinIndex;
+    },
     SET_appDict(state, appDict) {
       state.appDict = appDict;
     },
+    SET_curSkin(state, curSkin) {
+      state.curSkin = curSkin;
+    },
     SET_appTemplate(state, appTemplate) {
       state.appTemplate = appTemplate;
     },

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

@@ -8,3 +8,12 @@ export const filterItems = (key, dict = {}) => {
   });
   return val;
 };
+// 对象转对象数组
+export const transverter = (obj) => {
+  return Object.keys(obj).map((v) => {
+    return {
+      id: v,
+      name: obj[v],
+    };
+  });
+};