feat: 添加信息公开皮肤

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

@@ -78,6 +78,7 @@ export default {
       let obj = {
         productId: row.id,
         productName: row.productName,
+        productCode: row.productCode,
       };
       this.SET_curProduct(obj);
     },
@@ -167,4 +168,4 @@ export default {
     color: #fa4d4c;
   }
 }
-</style>
+</style>
\ No newline at end of file

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

@@ -54,6 +54,7 @@ import InformationSkin from "../informationskin/InformationSkin.vue";
 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 { mapState, mapMutations } from "vuex";
 import { filterItems } from "@/utils";
 export default {
@@ -69,6 +70,7 @@ export default {
     SelfService,
     DesSelfService,
     SignDevicekin,
+    InfoDisSkin,
   },
   props: {},
   data() {
@@ -82,40 +84,43 @@ export default {
     ...mapState("site", ["imageResolution", "curSkin", "curSkinIndex"]),
     component() {
       let str = "";
-      switch (this.curSkin.productName) {
-        case "排号机":
+      switch (this.curSkin.productCode) {
+        case "pdj":
           str = "LandscapeMode";
           break;
-        case "窗口屏":
+        case "ckp":
           str = "WindowSkin";
           break;
-        case "呼叫器":
+        case "hjq":
           str = "CallOutSkin";
           break;
-        case "集中显示屏":
+        case "jzxsp":
           str = "CentralizeSkin";
           break;
-        case "导视机":
+        case "dsj":
           str = "SignDevicekin";
           break;
-        case "评价器":
+        case "pjq":
           str = "AppraiseSkin";
           break;
-        case "自助服务终端":
+        case "zzfwzd":
           str = "SelfService";
           break;
-        case "填单机":
+        case "tdj":
           str = "WriteFormSkin";
           break;
-        case "样表机":
+        case "ybj":
           str = "SampleFormSkin";
           break;
-        case "信息发布终端":
+        case "xxfbp":
           str = "InformationSkin";
           break;
-        case "桌面式自助服务终端":
+        case "zmszzfwzd":
           str = "DesSelfService";
           break;
+        case "xxgk":
+          str = "InfoDisSkin";
+          break;
       }
       return str;
     },

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

+<template>
+  <div class="skin-box">
+    <!-- 信息公开皮肤 竖版 1080*1920 -->
+    <div
+      class="vertical-skin flex flexc aic"
+      :id="componentsId"
+      v-if="imageResolution === '2'"
+      :style="{
+        background: filterItem('1', 0),
+      }"
+    >
+      <div class="header flex jcc aic">
+        <div class="title" :style="{ color: filterItem('2', 0) }">
+          政务信息公开
+        </div>
+      </div>
+      <div class="info flex aic jcc">
+        <div class="info-item flex flexc aic">
+          <div class="pic flex aic jcc border">照片</div>
+          <div
+            class="name flex aic jcc"
+            :style="{
+              color: filterItem('5', 0),
+              background: filterItem('13', 0),
+            }"
+          >
+            姓名
+          </div>
+        </div>
+        <div class="info-item flex flexc aic">
+          <div class="pic flex aic jcc border">照片</div>
+          <div class="name flex aic jcc">姓名</div>
+        </div>
+      </div>
+      <div class="info-list flex1 border flex aic jcc">
+        信息
+      </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: {
+    // imgItem: {
+    //   type: Array,
+    //   required: true,
+    //   default: () => {
+    //     return [];
+    //   },
+    // },
+    skinFieldList: {
+      type: Array,
+      required: true,
+      default: () => {
+        return [];
+      },
+    },
+    imageResolution: {
+      required: true,
+      default: "1",
+    },
+    componentsId: {
+      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;
+    },
+    // 过滤导航
+    filterNav(type) {
+      let arr = [];
+      arr = this.skinFieldList.filter((v) => {
+        return v.remark == type;
+      });
+      return arr;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.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;
+      justify-content: space-between;
+      height: 100px;
+      margin-bottom: 40px;
+      align-items: center;
+      .skin-header-title {
+        font-size: 22px;
+        font-weight: 600;
+        letter-spacing: 2px;
+      }
+    }
+  }
+}
+.vertical-skin {
+  height: 1000px;
+  width: 562px;
+  padding-bottom: 10px;
+  background-image: linear-gradient(#26c5ff, #2c66ff);
+  background-repeat: no-repeat !important;
+  background-position: center !important;
+  background-size: 100% 100% !important;
+  .header {
+    height: 80px;
+    margin-bottom: 20px;
+    color: #fff;
+    .title {
+      font-size: 30px;
+      font-weight: 600;
+    }
+  }
+  .info {
+    width: 100%;
+    gap: 100px;
+    margin-bottom: 20px;
+    color: #fff;
+    .pic {
+      margin-bottom: 10px;
+      width: 150px;
+      height: 180px;
+      border-radius: 4px;
+    }
+    .name {
+      width: 80px;
+      height: 26px;
+      background: #0857e8;
+      border-radius: 28px;
+    }
+  }
+  .info-list {
+    width: 94%;
+    background: #fff;
+    border-radius: 4px;
+  }
+
+  .border {
+    border: 1px dashed #ececec;
+  }
+}
+</style>

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

@@ -72,6 +72,12 @@ const attrType = [
   { key: "10", label: "信息面板" },
   { key: "11", label: "头部背景" },
   { key: "12", label: "底部背景" },
+  { key: "13", label: "数据标题背景" },
+  { key: "14", label: "数据背景" },
+  { key: "15", label: "公告标题" },
+  { key: "16", label: "公告内容" },
+  { key: "17", label: "公告标题背景" },
+  { key: "18", label: "公告内容背景" },
 ];
 export default {
   props: {

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

@@ -195,6 +195,7 @@ import InformationSkin from "../informationskin/InformationSkin.vue";
 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 { uploadFile, skinSave, getTemplateList } from "@/services/surface";
 import html2canvas from "html2canvas";
 import { Empty } from "ant-design-vue";
@@ -213,6 +214,7 @@ export default {
     SelfService,
     DesSelfService,
     SignDevicekin,
+    InfoDisSkin,
   },
   props: {
     isShow: {
@@ -273,40 +275,43 @@ export default {
     },
     component() {
       let str = "";
-      switch (this.curProduct.productName) {
-        case "排号机":
+      switch (this.curProduct.productCode) {
+        case "pdj":
           str = "LandscapeMode";
           break;
-        case "窗口屏":
+        case "ckp":
           str = "WindowSkin";
           break;
-        case "呼叫器":
+        case "hjq":
           str = "CallOutSkin";
           break;
-        case "集中显示屏":
+        case "jzxsp":
           str = "CentralizeSkin";
           break;
-        case "导视机":
+        case "dsj":
           str = "SignDevicekin";
           break;
-        case "评价器":
+        case "pjq":
           str = "AppraiseSkin";
           break;
-        case "自助服务终端":
+        case "zzfwzd":
           str = "SelfService";
           break;
-        case "填单机":
+        case "tdj":
           str = "WriteFormSkin";
           break;
-        case "样表机":
+        case "ybj":
           str = "SampleFormSkin";
           break;
-        case "信息发布终端":
+        case "xxfbp":
           str = "InformationSkin";
           break;
-        case "桌面式自助服务终端":
+        case "zmszzfwzd":
           str = "DesSelfService";
           break;
+        case "xxgk":
+          str = "InfoDisSkin";
+          break;
       }
       return str;
     },