feat；添加换肤

sample-form-client-ui/admin/src/App.vue

@@ -9,7 +9,7 @@
 import local from "@/utils/local";
 import NetworkError from "@/components/NetworkError.vue";
 import mq from "@/mixin/mq";
-import { getHomeInfo } from "@/api";
+import { getHomeInfo, getSkinList } from "@/api";
 import { mapMutations } from "vuex";
 export default {
   mixins: [mq],
@@ -116,24 +116,28 @@ export default {
       }
     },
     // 换肤
-    getSetinfo() {
-      console.log("皮肤设置");
-      // let _this = this;
-      // setinfo().then((res) => {
-      //   const { code, data } = res.data;
-      //   if (code == 1) {
-      //     if (_this.linkDom) {
-      //       _this.linkDom.remove();
-      //     }
-      //     if (data.css_path) {
-      //       let link = document.createElement("link");
-      //       _this.linkDom = link;
-      //       link.rel = "stylesheet";
-      //       link.href = data.css_path;
-      //       document.getElementsByTagName("head")[0].appendChild(link);
-      //     }
-      //   }
-      // });
+    async getSetinfo() {
+      let res = await getSkinList({
+        page: 1,
+        size: -1,
+        used: 1,
+      });
+
+      if (res.data.code == 1) {
+        let { data } = res.data.data;
+        if (this.linkDom) {
+          this.linkDom.remove();
+        }
+        if (data[0].cssFilePath) {
+          let link = document.createElement("link");
+          this.linkDom = link;
+          link.rel = "stylesheet";
+          link.href = data[0].cssFilePath;
+          console.log(data[0]);
+          // document.getElementsByTagName("head")[0].appendChild(link);
+          document.head.appendChild(link);
+        }
+      }
     },
   },
 };
@@ -175,7 +179,11 @@ export default {
 .main-bg-img {
   background: url("./assets/img/bg(1).jpg") no-repeat;
 }
-.main-kstd-img {
+.main-ksck-img {
   background: url("./assets/img/btn_kuaisu.png") no-repeat;
 }
+//内页标题背景
+.main-title-bg-img {
+  background: url("./assets/img/title_1.jpg") no-repeat;
+}
 </style>

sample-form-client-ui/admin/src/api/index.js

@@ -103,3 +103,13 @@ export const checkMaterials = (data) => {
     },
   });
 };
+// 查询使用皮肤
+export const getSkinList = (data) => {
+  let baseUrl = local.getLocal("serverUrl");
+  // let siteId = local.getLocal("siteId");
+  return request({
+    url: `${baseUrl}sampleform/skin/list`,
+    method: "post",
+    data,
+  });
+};

sample-form-client-ui/admin/src/components/Header.vue

 <template>
-  <div class="header flex aic jcc">
+  <div class="header flex aic jcc main-title-bg-img">
     <slot name="title" class="title">
       <div></div>
     </slot>
@@ -32,7 +32,8 @@ export default {
   height: 100px;
   // padding: 0px 40px;
   margin-bottom: 10px;
-  background: url("../assets/img/title_1.jpg") no-repeat center;
+  // background: var(--main-theme-color);
+  // background: url("../assets/img/title_1.jpg") no-repeat center;
   background-size: 100% 100%;
   // background: var(--main-theme-color);
   box-shadow: 0px 2px 6px 6px #ccc;

sample-form-client-ui/admin/src/pages/home/Home.vue

@@ -115,7 +115,7 @@
       <div class="right flex flexc aic jcb">
         <div class="right-top flex aic jcb">
           <router-link to="/matterList">
-            <div class="fill-btn flex aic jcc pointer main-kstd-img">
+            <div class="fill-btn flex aic jcc pointer main-ksck-img">
               <span class="fill-btn-text1">快</span>
               <span class="fill-btn-text2">速</span>
               <span class="fill-btn-text3">查</span>

sample-form-client-ui/admin/src/pages/showpage/ShowMaterials.vue

@@ -271,25 +271,26 @@ export default {
     .icon1 {
       width: 26px;
       height: 26px;
-      background: #52a8f6;
+      background: var(--main-assist-color);
       border-radius: 50%;
-      color: var(--main-theme-color);
       display: flex;
       align-items: center;
       justify-content: center;
       color: #fff;
       i {
         font-size: 16px;
+        color: var(--main-theme-color);
       }
     }
     .icon2 {
       display: inline-block;
       width: 34px;
       height: 34px;
-      background: #f2f6fe;
+      background: var(--main-assist-color);
       border-radius: 16px;
-      text-align: center;
-      line-height: 34px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
       color: var(--main-theme-color);
       position: absolute;
       right: 28px;

sample-form-manager-ui/admin/src/api/skin.js

+// 皮肤管理api
+import request from "@/utils/request";
+// 获取皮肤列表
+export const getSkinList = (data) => {
+  return request({
+    url: `/sampleform/skin/list`,
+    method: "post",
+    data,
+  });
+};
+// 查看皮肤
+export const getSkinInfo = (params) => {
+  return request({
+    url: `/sampleform/skin/info`,
+    method: "post",
+    params,
+  });
+};
+// 使用皮肤
+export const useSkin = (data) => {
+  return request({
+    url: `/sampleform/skin/save`,
+    method: "post",
+    data,
+  });
+};

sample-form-manager-ui/admin/src/pages/hardware/NumberWriteDevice.vue

@@ -102,28 +102,28 @@
             <template slot-scope="scope">
               <el-tag
                 size="small"
-                v-if="scope.row.deviceStatus === 2"
+                v-if="scope.row.deviceStatus == 2"
                 type="success"
                 >在线</el-tag
               >
+              <el-tag
+                size="small"
+                v-else-if="scope.row.deviceStatus == 0"
+                type="danger"
+                >未激活</el-tag
+              >
               <el-tag size="small" v-else type="danger">离线</el-tag>
             </template>
           </el-table-column>
-          <el-table-column align="center" prop="enabled" label="启用/停用">
+          <!-- <el-table-column align="center" prop="enabled" label="启用/停用">
             <template slot-scope="scope">
-              <el-switch
-                disabled
-                class="tableScopeSwitch"
-                :active-value="1"
-                :inactive-value="0"
-                inactive-text="停用"
-                active-text="启用"
-                v-model="scope.row.enabled"
-                @change="handleChange(scope.row)"
+              <el-tag
+                size="small"
+                :type="scope.row.enabled === 1 ? 'success' : 'danger'"
+                >{{ scope.row.enabled === 1 ? "是" : "否" }}</el-tag
               >
-              </el-switch>
             </template>
-          </el-table-column>
+          </el-table-column> -->
           <el-table-column align="center" label="操作" width="100">
             <template slot-scope="scope">
               <div class="flex jca">

sample-form-manager-ui/admin/src/pages/software/skinManage/SkinManage.vue

@@ -7,14 +7,14 @@
       <!-- 皮肤列表 -->
       <div class="skin-box">
         <div class="skin-category">
-          <div class="color_title">分类一</div>
+          <!-- <div class="color_title">分类一</div> -->
           <div class="skin-list">
             <div
               class="skin-item flex flexc aic"
               v-for="v in skinList"
-              :key="v.skin_id"
+              :key="v.id"
             >
-              <span>{{ v.skin_name }}</span>
+              <span>{{ v.name }}</span>
               <div class="skin-img-box">
                 <img
                   class="skin-img"
@@ -24,11 +24,9 @@
               </div>
               <el-button
                 size="small"
-                :class="{ active: v.check === '1' }"
-                @click="changeSkin('pdj', v)"
-                >{{
-                  v.check === "1" ? "使用中(点击取消)" : "点击使用"
-                }}</el-button
+                :class="{ active: v.used == 1 }"
+                @click="changeSkin(v)"
+                >{{ v.used == 1 ? "使用中(点击取消)" : "点击使用" }}</el-button
               >
             </div>
           </div>
@@ -52,6 +50,7 @@
 <script>
 import local from "@/utils/local";
 import ElImageViewer from "element-ui/packages/image/src/image-viewer";
+import { getSkinList, useSkin } from "@/api/skin";
 export default {
   components: {
     ElImageViewer,
@@ -61,40 +60,43 @@ export default {
       siteId: local.getLocal("sampleSiteId")
         ? local.getLocal("sampleSiteId")
         : "",
-      skinList: [
-        {
-          id: 1,
-          skin_name: "样表普通皮肤",
-          previewImagePath: require("../../../assets/img/tiandan.png"),
-          check: "1",
-        },
-      ],
+      skinList: [],
       previewImg: false,
       previewUrl: "",
     };
   },
-  created() {},
+  created() {
+    this.getSkinList();
+  },
   methods: {
+    // 获取皮肤列表
+    async getSkinList() {
+      let res = await getSkinList({
+        page: 1,
+        size: -1,
+      });
+      if (res.data.code == 1) {
+        let { data } = res.data.data;
+        this.skinList = data;
+      }
+    },
     // 选择使用皮肤
-    async changeSkin(device, row) {
-      // if (row.check === "1") {
-      //   // let obj = {
-      //   //   skin_id: "",
-      //   //   css_path: "",
-      //   //   skin_name: "",
-      //   //   previewImagePath: "",
-      //   //   skinFieldList: "",
-      //   //   device,
-      //   // };
-      //   row.check = "0";
-      //   console.log(check, device);
-      //   // if (code === 1) {
-      //   //   this.$message.success("设置" + msg);
-      //   // }
-      // } else {
-      //   row.check = "1";
-      // }
-      console.log(device, row);
+    async changeSkin(row) {
+      let obj = {
+        id: row.id,
+        siteId: row.id,
+      };
+      if (row.used == 1) {
+        obj.used = 0;
+      } else {
+        obj.used = 1;
+      }
+      let res = await useSkin(obj);
+      let { code, msg } = res.data;
+      if (code == 1) {
+        this.$message.success(msg);
+        this.getSkinList();
+      }
     },
     // 预览皮肤
     handlePreview(url) {
@@ -130,10 +132,12 @@ export default {
       height: 130px;
       margin: 10px 0px;
       background-color: #ccc;
+      border-radius: 4px;
       .skin-img {
         width: 100%;
         height: 100%;
-        object-fit: contain;
+        object-fit: cover;
+        border-radius: 4px;
         cursor: pointer;
       }
     }

sample-form-manager-ui/admin/src/router/index.js

@@ -108,20 +108,20 @@ const dynamicRouter = [
       },
     ],
   },
-  // {
-  //   path: "/skinmanage",
-  //   component: Layouts,
-  //   meta: {
-  //     icon: "el-icon-orange",
-  //     title: "皮肤管理",
-  //   },
-  //   children: [
-  //     {
-  //       path: "",
-  //       component: () => import("@/pages/software/skinManage/SkinManage"),
-  //     },
-  //   ],
-  // },
+  {
+    path: "/skinmanage",
+    component: Layouts,
+    meta: {
+      icon: "el-icon-orange",
+      title: "皮肤管理",
+    },
+    children: [
+      {
+        path: "",
+        component: () => import("@/pages/software/skinManage/SkinManage"),
+      },
+    ],
+  },
   {
     path: "/numberwritedevice",
     component: Layouts,