feat：新增信息发布皮肤设置

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

@@ -40,12 +40,7 @@
                 showTotal: (total) => `共 ${total} 条`,
                 current: leftCurrent,
                 total: leftTotal,
-                pageSize: leftSize,
-                showSizeChanger: true,
-                showQuickJumper: true,
-                pageSizeOptions: pageSizeOptions,
-                onChange: changeLeft,
-                onShowSizeChange: showSizeChange,
+                defaultPageSize: 10000,
               }"
               :columns="leftColumns"
               :data-source="skinTemplate"
@@ -325,7 +320,7 @@ export default {
       leftLoading: false,
       rightLoading: false,
       leftCurrent: 1,
-      leftSize: 10,
+      leftSize: -1,
       leftTotal: 0,
       rightCurrent: 1,
       rightSize: 10,
@@ -371,10 +366,12 @@ export default {
         this.getTemplateList();
       }
       this.leftTotal = pageInfo.totalResult;
-      this.skinTemplate = data;
+      this.skinTemplate = data.sort((a, b) => {
+        return b.createTime - a.createTime;
+      });
       this.leftLoading = false;
     },
-    // 获取属性字段列表
+    // 获取属性字段列表()
     async getFieldList(search = {}) {
       this.rightLoading = true;
       let res = await getFieldList({

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

@@ -163,11 +163,12 @@ export default {
     .preview-item {
       margin-bottom: 6px;
       height: 120px;
+      background-color: #ececec;
       cursor: pointer;
       img {
         width: 100%;
         height: 100%;
-        object-fit: cover;
+        object-fit: contain;
       }
     }
     .active {

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

@@ -12,19 +12,15 @@
           </span>
         </p>
       </div>
-      <div class="show-skin">
+      <div class="show-skin flex aic jcc">
         <component
           conponentsId="skinInfo"
           :is="component"
           :imageResolution="skinInfo.imageResolution"
           :skinFieldList="skinInfo.skinFieldList"
         ></component>
-        <!-- <LandscapeMode
-          :imageResolution="skinInfo.imageResolution"
-          :skinFieldList="skinInfo.skinFieldList"
-        ></LandscapeMode> -->
       </div>
-      <div class="show-btn">
+      <div class="show-btn flex aic jcc">
         <a-space size="middle">
           <a-button class="edit-btn" @click="editSurface"
             >修改皮肤参数</a-button
@@ -56,6 +52,7 @@ import CentralizeSkin from "../centralizeskin/CentralizeSkin.vue";
 import AppraiseSkin from "../appraiseskin/AppraiseSkin.vue";
 import SampleFormSkin from "../sampleFormSkin/SampleFormSkin.vue";
 import WriteFormSkin from "../writeFormSkin/WriteFormSkin.vue";
+import InformationSkin from "../informationskin/InformationSkin.vue";
 export default {
   components: {
     LandscapeMode,
@@ -65,6 +62,7 @@ export default {
     AppraiseSkin,
     SampleFormSkin,
     WriteFormSkin,
+    InformationSkin,
   },
   props: {},
   data() {
@@ -111,6 +109,9 @@ export default {
         case 9:
           str = "SampleFormSkin";
           break;
+        case 10:
+          str = "InformationSkin";
+          break;
       }
       return str;
     },
@@ -187,13 +188,22 @@ export default {
   display: flex;
   flex-direction: column;
   justify-content: center;
+  overflow-y: auto;
+  &::-webkit-scrollbar {
+    width: 5px;
+  }
+  &::-webkit-scrollbar-thumb {
+    border-radius: 5px;
+    background: rgba(144, 147, 153, 0.5);
+  }
+  &::-webkit-scrollbar-track {
+    box-shadow: 0;
+    border-radius: 0px;
+    background: #f0f2f5;
+  }
   .show-content {
     width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
+    height: 75vh;
     .show-header {
       text-align: center;
       color: #48866c;
@@ -203,7 +213,6 @@ export default {
       }
     }
     .show-skin {
-      height: 550px;
       margin-bottom: 20px;
       -transform: scale(0.9);
       img {

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

+<template>
+  <div class="skin-box">
+    <!-- 信息发布 横板皮肤 -->
+    <div
+      :id="conponentsId"
+      class="across-skin flex flexc"
+      v-if="imageResolution === '1'"
+    >
+      <div
+        class="header"
+        :style="{
+          background: filterItem('2', 0),
+        }"
+      >
+        政务服务中心
+      </div>
+      <div class="main flex1 flex aic jcb">
+        <div class="left">
+          <img src="../../../../assets/img/banner2.png" />
+        </div>
+        <div class="right">
+          <img src="../../../../assets/img/banner3.png" />
+        </div>
+      </div>
+      <div
+        class="footer flex"
+        :style="{
+          background: filterItem('11', 0),
+        }"
+      >
+        <div
+          class="title flex aic jcc"
+          :style="{
+            background: filterItem('10', 0),
+            color: filterItem('5', 0),
+          }"
+        >
+          滚动新闻
+        </div>
+        <div class="text flex aic">
+          这里是信息发布滚动信息这里是信息发布滚动信息这里是信息发布滚动信息
+        </div>
+      </div>
+    </div>
+    <!-- 信息发布 竖版皮肤 -->
+    <div
+      :id="conponentsId"
+      class="vertical-skin flex flexc"
+      v-else-if="imageResolution === '2'"
+    >
+      <div
+        class="header"
+        :style="{
+          background: filterItem('2', 0),
+        }"
+      >
+        政务服务中心
+      </div>
+      <div class="main">
+        <div class="left">
+          <img class="banner" src="../../../../assets/img/banner2.png" />
+        </div>
+        <div class="right">
+          <img class="banner" src="../../../../assets/img/banner3.png" />
+        </div>
+      </div>
+      <div
+        class="footer flex"
+        :style="{
+          background: filterItem('11', 0),
+        }"
+      >
+        <div
+          class="title flex aic jcc"
+          :style="{
+            background: filterItem('10', 0),
+            color: filterItem('5', 0),
+          }"
+        >
+          滚动新闻
+        </div>
+        <div class="text flex aic">
+          这里是信息发布滚动信息这里是信息发布滚动信息
+        </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_BASE_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: 562px;
+  background-image: linear-gradient(#26c5ff, #2c66ff);
+  background-repeat: no-repeat !important;
+  background-position: center !important;
+  background-size: cover !important;
+  .header {
+    height: 80px;
+    font-size: 30px;
+    font-weight: 600;
+    color: #fff;
+    text-align: center;
+    line-height: 80px;
+    background: url("../../../../assets/img/bg_header.png") no-repeat;
+    background-size: 100% 100% !important;
+  }
+  .main {
+    .left,
+    .right {
+      width: 50%;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+  .footer {
+    height: 50px;
+    .title {
+      width: 100px;
+      height: 100%;
+      font-size: 18px;
+      color: #effe00;
+    }
+    .text {
+      height: 100%;
+      font-size: 18px;
+      color: #fff;
+    }
+  }
+}
+.vertical-skin {
+  height: 1000px;
+  width: 562px;
+  background-image: linear-gradient(#26c5ff, #2c66ff);
+  background-repeat: no-repeat !important;
+  background-position: center !important;
+  background-size: 100% 100% !important;
+  .header {
+    height: 80px;
+    font-size: 30px;
+    font-weight: 600;
+    color: #fff;
+    text-align: center;
+    line-height: 80px;
+    background: url("../../../../assets/img/bg_header.png") no-repeat;
+    background-size: 100% 100% !important;
+    flex-shrink: 0;
+  }
+  .main {
+    height: 860px;
+    .left,
+    .right {
+      width: 100%;
+      height: 50%;
+      .banner {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+  .footer {
+    height: 60px;
+    flex-shrink: 0;
+    .title {
+      width: 100px;
+      height: 100%;
+      font-size: 18px;
+      color: #effe00;
+    }
+    .text {
+      height: 100%;
+      font-size: 18px;
+      color: #fff;
+    }
+  }
+}
+</style>
\ No newline at end of file

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

+<template>
+  <div>
+    <a-modal
+      v-model="Visible"
+      title="新增设备"
+      @ok="handleOk"
+      @cancel="handleClose"
+    >
+      <a-form-model
+        :model="form"
+        ref="form"
+        :rules="rules"
+        :label-col="{ span: 5 }"
+        :wrapper-col="{ span: 19 }"
+      >
+        <a-form-model-item label="设备名称" prop="productName">
+          <a-input placeholder="请输入设备名称" v-model="form.productName" />
+        </a-form-model-item>
+        <a-form-model-item label="设备编号" prop="productCode">
+          <a-input
+            type="password"
+            placeholder="请输入设备编号"
+            v-model="form.productCode"
+          />
+        </a-form-model-item>
+        <a-form-model-item label="备注" prop="productRemark">
+          <a-textarea
+            placeholder="请再次输入备注"
+            v-model="form.productRemark"
+            allow-clear
+          />
+        </a-form-model-item>
+      </a-form-model>
+    </a-modal>
+  </div>
+</template>
+
+<script>
+import { ProductSave } from "@/services/surface";
+export default {
+  props: {
+    visible: {
+      required: true,
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      form: {
+        productName: "",
+        productCode: "",
+        productRemark: "",
+      },
+      rules: {
+        productName: [
+          { required: true, message: "请输入设备名称", trigger: "blur" },
+        ],
+        productCode: [
+          { required: true, message: "请输入设备编号", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  computed: {
+    Visible: {
+      get() {
+        return this.visible;
+      },
+      set(val) {
+        this.$emit("update:visible", val);
+      },
+    },
+  },
+  methods: {
+    handleOk() {
+      this.$refs.form.validate(async (valid) => {
+        if (valid) {
+          let res = await ProductSave(this.form);
+          let { code, msg } = res.data;
+          if (code === 1) {
+            this.$message.success(msg);
+            this.$emit("addDev");
+            this.handleClose();
+          }
+        }
+      });
+    },
+    // 关闭对话框
+    handleClose() {
+      this.$refs.form.resetFields();
+      this.Visible = false;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.ant-form-item {
+  display: flex;
+  align-items: center !important;
+  margin-bottom: 15px;
+}
+/deep/.ant-form-explain {
+  position: absolute;
+}
+</style>
\ No newline at end of file

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

@@ -71,6 +71,7 @@ const attrType = [
   { key: "8", label: "辅助色" },
   { key: "9", label: "备案" },
   { key: "10", label: "信息面板" },
+  { key: "11", label: "底部背景" },
 ];
 export default {
   props: {

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

 <template>
-  <div class="add-surface" :class="{ isShow: show }">
+  <div class="add-surface" v-if="show">
     <a-card :bordered="false">
       <span slot="title">{{ facilityInfo.productName + "皮肤" }}</span>
       <a-button slot="extra" @click="backOne">返回上一级</a-button>
@@ -11,23 +11,6 @@
             :skinFieldList="formData.skinFieldList"
             :imageResolution="formData.imageResolution"
           ></component>
-          <!-- 排号机皮肤展示 -->
-          <!-- <LandscapeMode
-            ref="LandscapeMode"
-            :skinFieldList="formData.skinFieldList"
-            v-if="facilityInfo.productName === '排队机'"
-            :imageResolution="formData.imageResolution"
-          ></LandscapeMode> -->
-          <!-- 空数据显示 -->
-          <!-- <a-empty
-            v-else
-            :image="require('../../../../assets/img/original.png')"
-            :image-style="{
-              height: '80px',
-            }"
-          >
-            <span slot="description"> <a href="#API">暂无皮肤模板</a> </span>
-          </a-empty> -->
         </div>
       </div>
       <!-- 字段属性 -->
@@ -195,6 +178,7 @@ import CentralizeSkin from "../centralizeskin/CentralizeSkin.vue";
 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 { uploadFile, skinSave, getTemplateList } from "@/services/surface";
 import html2canvas from "html2canvas";
 import { Empty } from "ant-design-vue";
@@ -208,6 +192,7 @@ export default {
     AppraiseSkin,
     SampleFormSkin,
     WriteFormSkin,
+    InformationSkin,
   },
   props: {
     isShow: {
@@ -296,6 +281,9 @@ export default {
         case 9:
           str = "SampleFormSkin";
           break;
+        case 10:
+          str = "InformationSkin";
+          break;
       }
       return str;
     },
@@ -462,20 +450,27 @@ export default {
   top: 0px;
   height: 100%;
   background-color: #fff;
-  display: none;
   z-index: 100;
   .add-surface-preview {
     width: 70%;
+    height: 75vh;
     background-image: linear-gradient(#cfe9ff, #fff);
     padding-top: 60px;
     padding-bottom: 10px;
     display: flex;
     justify-content: center;
-    overflow-y: scroll;
-    scrollbar-width: none; /* firefox */
-    -ms-overflow-style: none; /* IE 10+ */
+    overflow-y: auto;
     &::-webkit-scrollbar {
-      display: none;
+      width: 5px;
+    }
+    &::-webkit-scrollbar-thumb {
+      border-radius: 5px;
+      background: rgba(144, 147, 153, 0.5);
+    }
+    &::-webkit-scrollbar-track {
+      box-shadow: 0;
+      border-radius: 0px;
+      background: #f0f2f5;
     }
   }
   .maneuvering-area {
@@ -488,9 +483,7 @@ export default {
     flex-direction: column;
     .maneuvering-form {
       flex: 1;
-      overflow-y: scroll;
-      // scrollbar-width: none; /* firefox */
-      // -ms-overflow-style: none; /* IE 10+ */
+      overflow-y: auto;
       &::-webkit-scrollbar {
         width: 5px;
       }

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

@@ -157,7 +157,7 @@ export default {
   background-image: linear-gradient(#26c5ff, #2c66ff);
   background-repeat: no-repeat !important;
   background-position: center !important;
-  background-size: cover !important;
+  background-size: 100% 100% !important;
   h1 {
     color: #fff;
     margin: 0px;

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

@@ -2,16 +2,23 @@
   <div class="surface">
     <div class="container">
       <a-card title="皮肤管理" :bordered="false">
-        <a-button
-          slot="extra"
-          type="primary"
-          v-permission="[1]"
-          @click="$router.push('surface/addsurfacetemplate')"
-          >新增皮肤模板</a-button
-        >
+        <div slot="extra">
+          <a-space>
+            <a-button v-permission="[1]" icon="plus" @click="addDev"
+              >新增设备</a-button
+            >
+            <a-button
+              type="primary"
+              v-permission="[1]"
+              @click="$router.push('surface/addsurfacetemplate')"
+              >新增皮肤模板</a-button
+            >
+          </a-space>
+        </div>
         <div class="main">
           <div class="menu-box">
             <LeftMenu
+              ref="LeftMenu"
               @clickFacility="clickFacility"
               @searchProduct="searchProduct"
             ></LeftMenu>
@@ -43,6 +50,8 @@
         :classifyList="classifyList"
         @addSkinSuccess="addSkinSuccess"
       ></AddSurface>
+      <!-- 新增设备 -->
+      <AddDev :visible.sync="addDevVisible" @addDev="addDevSuccess"></AddDev>
     </div>
   </div>
 </template>
@@ -54,6 +63,7 @@ import ShowBox from "./components/ShowBox.vue";
 import RightPreview from "./components/RightPreview.vue";
 import EditClassify from "./modal/EditClassify.vue";
 import AddSurface from "./modal/AddSurface.vue";
+import AddDev from "./modal/AddDev.vue";
 export default {
   components: {
     LeftMenu,
@@ -61,11 +71,13 @@ export default {
     RightPreview,
     EditClassify,
     AddSurface,
+    AddDev,
   },
   data() {
     return {
       isShow: false,
       visible: false,
+      addDevVisible: false,
       classifyList: [], //皮肤分类数据
     };
   },
@@ -114,6 +126,14 @@ export default {
     addSkinSuccess() {
       this.$refs.RightPreview.getSkinList();
     },
+    // 新增设备
+    addDev() {
+      this.addDevVisible = true;
+    },
+    // 新增设备成功
+    addDevSuccess() {
+      this.$refs.LeftMenu.getProductList();
+    },
   },
 };
 </script>