修复appui配置异常问题

package-lock.json

@@ -27,6 +27,7 @@
         "popper.js": "^1.16.1",
         "sass": "^1.67.0",
         "sass-loader": "^13.3.2",
+        "svgaplayerweb": "^2.3.2",
         "unplugin-element-plus": "^0.8.0",
         "vue-clipboard2": "^0.3.3",
         "vue-router": "^4.0.3",
@@ -11990,6 +11991,11 @@
       "integrity": "sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==",
       "dev": true
     },
+    "node_modules/svgaplayerweb": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmmirror.com/svgaplayerweb/-/svgaplayerweb-2.3.2.tgz",
+      "integrity": "sha512-QuTvNIgy3W6Mi4h74SczEHUtAwb8m3ax7Ai7xRLUuN6hjJh49RGtWOWq1IuF2I7ECcl0HAYn8FcTn99UDz9UiQ=="
+    },
     "node_modules/svgo": {
       "version": "2.8.0",
       "resolved": "https://registry.npmmirror.com/svgo/-/svgo-2.8.0.tgz",

package.json

@@ -27,6 +27,7 @@
     "popper.js": "^1.16.1",
     "sass": "^1.67.0",
     "sass-loader": "^13.3.2",
+    "svgaplayerweb": "^2.3.2",
     "unplugin-element-plus": "^0.8.0",
     "vue-clipboard2": "^0.3.3",
     "vue-router": "^4.0.3",

src/views/firstpage/towPageBannerView.vue

@@ -861,7 +861,7 @@ export default {
               var endTime = ($('#endTime').val()) ? ($('#endTime').val() + ' 23:59:59') : null;
               var param = {
                 pageSize: params.pageSize,
-                pageNumber: params.pageNumber,
+                pageNo: params.pageNumber,
                 // beginTime: beginTime,
                 // endTime: endTime,
                 bannerStatus: parseInt($('#status').val()),

src/views/roomBackground/appUiSet.vue

@@ -412,6 +412,14 @@ export default {
         type: "success",
       });
     },
+    handleAvatarSuccess6(res, file) {
+      this.inquire.imageUrl6 = file.response.data;
+      ElMessage({
+        showClose: true,
+        message: "上传成功！",
+        type: "success",
+      });
+    },
     handleAvatarSuccess7(res, file) {
       this.inquire.imageUrl7 = file.response.data;
       ElMessage({

src/views/roomBackground/roomBackground.vue

@@ -48,9 +48,9 @@
       class="primary"
       type="primary"
       @click="
-        partitionId = '';
+        inquire.partitionId = '';
-        id = '';
+        inquire.id = '';
-        status = '';
+        inquire.status = '';
         getData();
       "
       >重置按钮</el-button
@@ -106,7 +106,7 @@
       <el-table-column prop="url" align="center" label="图片">
         <template v-slot="scope">
           <el-image
-            v-if="scope.row.url"
+            v-if="!scope.row.url.toLowerCase().endsWith('.svga')"
             style="width: 100px; height: 100px"
             :src="scope.row.url"
             :zoom-rate="1.1"
@@ -115,7 +115,9 @@
             preview-teleported="true"
             hide-on-click-modal="true"
           />
-          <div v-else>/</div>
+          <div v-else :id="'guide' + scope.row.id" class="game-guide">
+            {{ guideFn(scope.row.id, scope.row.url) }}
+          </div>
         </template>
       </el-table-column>
       <el-table-column prop="createTime" align="center" label="创建时间" />
@@ -341,8 +343,7 @@ import {
 import { dateFormat } from "@/utils/system-helper";
 // @ts-ignore
 import { ElMessage, ElTable } from "element-plus";
-import { ref } from "vue";
+import SVGA from "svgaplayerweb";
-import { ElMessageBox } from "element-plus"; // 正确引入 ElM
 export default {
   name: "roomBackground",
   data() {
@@ -403,6 +404,18 @@ export default {
     });
   },
   methods: {
+    guideFn(id, url) {
+      if (url.toLowerCase().endsWith(".svga")) {
+        // 获取id的dom元素
+        let player = new SVGA.Player(`#guide${id}`);
+        let parser = new SVGA.Parser();
+        parser.load(url, (videoItem) => {
+          // 你的svga文件路径
+          player.setVideoItem(videoItem);
+          player.startAnimation(); // 开始动画
+        });
+      }
+    },
     // 查询接口
     getData() {
       this.isLoading = true;
@@ -620,4 +633,17 @@ export default {
     height: 150px;
   }
 }
+.game-guide {
+  width: 100px;
+  height: 100px;
+  overflow: hidden;
+  // left: 50%;
+  // top: 50%;
+  // transform: translate(-50%,-50%);
+  canvas {
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+}
 </style>