feat:新增导视机皮肤设置

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

@@ -55,6 +55,7 @@ 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 SignDevicekin from "../signdeviceskin/SignDeviceSkin.vue";
 import { mapState, mapMutations } from "vuex";
 import { filterItems } from "@/utils";
 export default {
@@ -69,6 +70,7 @@ export default {
     InformationSkin,
     SelfService,
     DesSelfService,
+    SignDevicekin,
   },
   props: {},
   data() {
@@ -96,7 +98,7 @@ export default {
           str = "CentralizeSkin";
           break;
         case "导视机":
-          // str = "CentralizeSkin";
+          str = "SignDevicekin";
           break;
         case "评价器":
           str = "AppraiseSkin";

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

@@ -189,6 +189,7 @@ 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 SignDevicekin from "../signdeviceskin/SignDeviceSkin.vue";
 import { uploadFile, skinSave, getTemplateList } from "@/services/surface";
 import html2canvas from "html2canvas";
 import { Empty } from "ant-design-vue";
@@ -206,6 +207,7 @@ export default {
     InformationSkin,
     SelfService,
     DesSelfService,
+    SignDevicekin,
   },
   props: {
     isShow: {
@@ -280,7 +282,7 @@ export default {
           str = "CentralizeSkin";
           break;
         case "导视机":
-          // str = "CentralizeSkin";
+          str = "SignDevicekin";
           break;
         case "评价器":
           str = "AppraiseSkin";

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

+<template>
+  <div class="skin-box">
+    <!-- 导视机 横板 -->
+    <div
+      :id="conponentsId"
+      v-if="imageResolution === '1'"
+      class="across-skin flex flexc aic"
+    >
+      <!-- 头部 -->
+      <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="info flex aic jcc"
+          :style="{
+            background: filterItem('10', 0),
+          }"
+          :class="{ border: !filterItem('10', 0) }"
+        >
+          信息窗口
+        </div>
+      </div>
+      <!-- 底部 -->
+      <div class="footer mt20 flex jcb">
+        <div
+          v-for="v in 5"
+          :key="v"
+          class="footer-item flex aic jcc"
+          :style="{
+            background: filterItem('4', 0),
+            color: filterItem('7', 0),
+          }"
+          :class="{ border: !filterItem('4', 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 ;
+  .border {
+    border: 1px dashed #ececec;
+  }
+  .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;
+    .info {
+      width: 39%;
+      height: 100%;
+      padding: 10px;
+      border-radius: 4px;
+      background-repeat: no-repeat !important;
+      background-size: 100% 100% !important;
+    }
+  }
+  .footer {
+    width: 100%;
+    height: 150px;
+    padding: 20px;
+    padding-top: 0px;
+    color: #fff;
+    .footer-item {
+      width: 19%;
+      height: 90px;
+      border-radius: 4px;
+      font-size: 18px;
+      font-weight: 600;
+      background-repeat: no-repeat !important;
+      background-size: 100% 100% !important;
+    }
+  }
+}
+</style>
\ No newline at end of file