From 5f61ceae03719d204f213136ecf5a66b945d328e Mon Sep 17 00:00:00 2001
From: xuhuajiao <13476289682@163.com>
Date: Thu, 21 Aug 2025 17:27:04 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E5=B1=8F=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/digitalScreen/index.vue             |   8 +-
 .../digitalScreen/module/areaSetting.vue      | 108 +++++++++++++++---
 .../digitalScreen/module/bookRecommend.vue    |  69 +++++------
 .../digitalScreen/module/mediaSetting.vue     |   2 +
 4 files changed, 133 insertions(+), 54 deletions(-)

diff --git a/src/views/digitalScreen/index.vue b/src/views/digitalScreen/index.vue
index 6f36acc..2adb9f1 100644
--- a/src/views/digitalScreen/index.vue
+++ b/src/views/digitalScreen/index.vue
@@ -80,7 +80,7 @@
                 <el-radio-group v-model="arrival_library_setting" aria-hidden="false" @change="handleArrivalSettingChange">
                   <el-radio label="1">本地数据</el-radio>
                   <el-radio label="2">基数计算</el-radio>
-                  <el-radio label="3">第三方接口</el-radio>
+                  <!-- <el-radio label="3">第三方接口</el-radio> -->
                 </el-radio-group>
               </div>
               <div v-if="arrival_library_setting === '2'" class="library-form">
@@ -312,7 +312,7 @@
             </div>
             <wecharQrCode v-if="currentScreenItem.id === 1 || currentScreenItem.id === 4" ref="wecharQrCodeRef" :qr-code-url="wecharQrCodeUrl" @triggerInit="initScreenSetting" @ready="onWechatQrCodeReady" />
             <bookRecommend v-if="currentScreenItem.id === 1" ref="bookRecommendRef" @ready="initScreenBookRecommend" />
-            <areaSetting v-if="currentScreenItem.id === 2" ref="areaSettingRef" :map-data="mapData" @triggerInit="initScreenSetting" @ready="initScreenBranch" />
+            <areaSetting v-if="currentScreenItem.id === 2" ref="areaSettingRef" :map-data="mapData" :map-spacing="mapSpacing" @triggerInit="initScreenSetting" @ready="initScreenBranch" />
             <mediaSetting v-if="currentScreenItem.id === 4" ref="mediaSettingRef" @ready="initScreenNotice" />
             <advSetting v-if="currentScreenItem.id === 5" ref="advSettingRef" :welcome-play="welcomePlay" @triggerInit="initScreenSetting" @ready="initScreenWelcomePromotion" />
           </div>
@@ -386,6 +386,7 @@ export default {
       },
       wecharQrCodeUrl: null,
       mapData: null,
+      mapSpacing: null,
       welcomePlay: null,
       previewUrlParent: null,
       editStatus: {
@@ -571,6 +572,9 @@ export default {
           if (code === 'map_data') {
             this.mapData = context
           }
+          if (code === 'map_spacing') {
+            this.mapSpacing = context
+          }
 
           if (code === 'welcome_play') {
             this.welcomePlay = context
diff --git a/src/views/digitalScreen/module/areaSetting.vue b/src/views/digitalScreen/module/areaSetting.vue
index 4b17139..6d0a47e 100644
--- a/src/views/digitalScreen/module/areaSetting.vue
+++ b/src/views/digitalScreen/module/areaSetting.vue
@@ -4,7 +4,7 @@
       <div class="config-item-main">
         <span class="data-title">地图DataV</span>
         <el-form ref="areaForm" class="areaForm" :model="areaForm" size="small" label-width="100px">
-          <el-form-item label="GeoJSON" prop="map_data">
+          <el-form-item class="geoInput" label="GeoJSON" prop="map_data">
             <el-tooltip v-if="!editStatus.areaForm.map_data" class="item" effect="dark" content="双击输入框进行编辑" placement="top">
               <span
                 class="edit-readonly"
@@ -24,9 +24,33 @@
               @keyup.enter="handleBlur('areaForm', 'map_data')"
             />
           </el-form-item>
+          <div class="config-remarks" style="margin-left: 100px; margin-bottom: 20px;">双击输入框可进行编辑。数据将用于“区域屏”，显示区域地图。<i class="iconfont icon-zhuyi-lan" @click="geoJsonVisible=true" /></div>
+
+          <el-form-item label="地图边距微调" class="padding-style-input" prop="map_spacing">
+            <el-tooltip v-if="!editStatus.areaForm.map_spacing" class="item" effect="dark" content="双击输入框进行编辑" placement="top">
+              <div style="display: flex; justify-content: flex-start; width: 340px; height: 32px; align-items: flex-start;">
+                <span
+                  class="edit-readonly"
+                  @dblclick="handleDblClick('areaForm', 'map_spacing')"
+                >
+                  {{ areaForm.map_spacing || '' }}
+                </span>
+
+                <span class="edit-slot">像素</span>
+              </div>
+            </el-tooltip>
+            <el-input
+              v-else
+              ref="areaFormmap_spacing"
+              v-model="areaForm.map_spacing"
+              @blur="handleBlur('areaForm', 'map_spacing')"
+              @keyup.enter="handleBlur('areaForm', 'map_spacing')"
+            ><template slot="append">像素</template></el-input>
+          </el-form-item>
+          <div class="config-remarks" style="margin-left: 100px;">双击输入框可进行编辑。由于地图形状各异，如果需要调整地图垂直位置（让显示更居中），可通过次参数微调，保存后在预览页面查看最终效果！</div>
         </el-form>
       </div>
-      <div class="config-remarks">双击输入框可进行编辑。数据将用于“区域屏”，显示区域地图。<i class="iconfont icon-zhuyi-lan" @click="geoJsonVisible=true" /></div>
+
     </div>
     <div class="config-item">
       <div class="config-item-main">
@@ -202,6 +226,10 @@ export default {
     mapData: {
       type: String,
       default: null
+    },
+    mapSpacing: {
+      type: String,
+      default: null
     }
   },
   data() {
@@ -210,11 +238,13 @@ export default {
       btnLoading: false,
       deleteLoading: false,
       areaForm: {
-        map_data: null
+        map_data: null,
+        map_spacing: null
       },
       editStatus: {
         areaForm: {
-          map_data: false
+          map_data: false,
+          map_spacing: false
         }
       },
       originalValues: {
@@ -271,10 +301,17 @@ export default {
         this.areaForm.map_data = newVal
         this.originalValues.areaForm.map_data = newVal
       }
+    },
+    mapSpacing(newVal) {
+      if (newVal !== this.areaForm.map_spacing) {
+        this.areaForm.map_spacing = newVal
+        this.originalValues.areaForm.map_spacing = newVal
+      }
     }
   },
   created() {
     this.areaForm.map_data = this.mapData
+    this.areaForm.map_spacing = this.mapSpacing
   },
   mounted() {
     this.$emit('ready')
@@ -316,7 +353,7 @@ export default {
     submitMapData(formName, field) {
       const value = this[formName][field]
       if (!value) {
-        this.$message.warning(`GeoJSON不能为空`)
+        this.$message.warning(`${this.getFieldLabel(formName, field)}不能为空`)
         this[formName][field] = this.originalValues[formName][field]
         return
       }
@@ -329,17 +366,26 @@ export default {
       FetchEditScreenSetting(param)
         .then((res) => {
           if (res.code !== 500) {
-            this.$message.success('GeoJSON更新成功')
+            this.$message.success(`${this.getFieldLabel(formName, field)}更新成功`)
             this.$emit('update:mapData', value)
             this.$emit('triggerInit')
           } else {
-            this.$message.error('GeoJSON更新失败')
+            this.$message.error(`${this.getFieldLabel(formName, field)}更新失败`)
           }
         })
         .catch(() => {
-          this.$message.error('GeoJSON更新失败')
+          this.$message.error(`${this.getFieldLabel(formName, field)}更新失败`)
         })
     },
+    getFieldLabel(formName, field) {
+      const labels = {
+        areaForm: {
+          map_data: 'GeoJSON',
+          map_spacing: '地图边距微调'
+        }
+      }
+      return labels[formName][field] || field
+    },
     handleCover(value) {
       if (value) {
         const imgUrl = this.baseApi + '/api/fileRelevant/getImg?imgType=1&imgId=' + value
@@ -509,23 +555,29 @@ export default {
 
 <style lang="scss" scoped>
 @import "~@/assets/styles/digitalScreen.scss";
-.edit-readonly{
-  width: 800px !important;
-  height: 110px !important;
-  line-height: 20px !important;
-  overflow: hidden;
-  overflow-y: scroll;
-}
-.areaForm{
-  ::v-deep .el-form-item__content {
+.geoInput{
+  .edit-readonly{
     width: 800px !important;
     height: 110px !important;
+    line-height: 20px !important;
+    overflow: hidden;
+    overflow-y: scroll;
+  }
+}
+
+.areaForm{
+  ::v-deep .geoInput{
+    .el-form-item__content {
+      width: 800px !important;
+      height: 110px !important;
+    }
   }
 }
 
 .icon-zhuyi-lan{
   font-size: 20px;
   color: #0348f3;
+  cursor: pointer;
 }
 .geoJson-dialog{
   ::v-deep .el-dialog{
@@ -583,7 +635,7 @@ export default {
     position: relative;
     display: flex;
     justify-content: flex-start;
-    height: 110px;
+    height: 96px;
     margin-right: 10px;
     img{
       display: block;
@@ -599,5 +651,23 @@ export default {
     }
   }
 }
-
+.padding-style-input{
+  .edit-readonly{
+    width: 289px !important;
+    border-right: none !important;
+    margin-right: 0 !important;
+    border-radius: 4px 0 0 4px !important;
+  }
+}
+.edit-slot {
+  background-color: #f5f7fa;
+  color: #909399;
+  display: block;
+  position: relative;
+  border: 1px solid #dcdfe6;
+  border-radius: 0 4px 4px 0;
+  padding: 0 20px;
+  white-space: nowrap;
+  height: 32px;
+}
 </style>
diff --git a/src/views/digitalScreen/module/bookRecommend.vue b/src/views/digitalScreen/module/bookRecommend.vue
index f5471a1..e171652 100644
--- a/src/views/digitalScreen/module/bookRecommend.vue
+++ b/src/views/digitalScreen/module/bookRecommend.vue
@@ -1,29 +1,30 @@
 <template>
-  <div class="config-item-main">
-    <span class="data-title">图书推荐</span>
-    <div class="upload-item">
-      <p>推荐列表</p>
-      <div class="book-swiper-wrapper">
-        <swiper
-          ref="bookSwiper"
-          :options="swiperOptions"
-          class="book-swiper"
-        >
-          <swiper-slide
-            v-for="(book, index) in bookList"
-            :key="book.id"
-            class="book-list-item"
-            :class="{ 'book-list-item--selected': book.selected }"
-            style="background-color: transparent;"
+  <div>
+    <div class="config-item-main">
+      <span class="data-title">图书推荐</span>
+      <div class="upload-item">
+        <p>推荐列表</p>
+        <div class="book-swiper-wrapper">
+          <swiper
+            ref="bookSwiper"
+            :options="swiperOptions"
+            class="book-swiper"
           >
+            <swiper-slide
+              v-for="(book, index) in bookList"
+              :key="book.id"
+              class="book-list-item"
+              :class="{ 'book-list-item--selected': book.selected }"
+              style="background-color: transparent;"
+            >
 
-            <div style="cursor: default;" @click.stop="toggleBookSelect(index)">
-              <img :src="book.imgPath ? (baseApi + '/api/fileRelevant/getImg?imgType=2&imgId=' + book.imgPath) : require('@/assets/images/screen/book.png')" alt="图书封面">
-              <div v-if="book.selected" class="select-style">
-                <div class="select-mask" />
-                <i class="iconfont icon-wancheng" style="font-size: 20px; right: 6px; top: 6px;" />
+              <div style="cursor: default;" @click.stop="toggleBookSelect(index)">
+                <img :src="book.imgPath ? (baseApi + '/api/fileRelevant/getImg?imgType=2&imgId=' + book.imgPath) : require('@/assets/images/screen/book.png')" alt="图书封面">
+                <div v-if="book.selected" class="select-style">
+                  <div class="select-mask" />
+                  <i class="iconfont icon-wancheng" style="font-size: 20px; right: 6px; top: 6px;" />
+                </div>
               </div>
-            </div>
             <!-- <span style="position: absolute; top: 0; left: 0; color: #fff;">{{ book.id }}</span> -->
             <!-- <div style="position: relative; position: absolute; left: 0; bottom: 0; width: calc(100% - 15px); display: flex; justify-content: space-between; padding: 0 5px 0 10px; background: rgba(0,0,0,.5); cursor: pointer;">
               <div class="book-select" @click.stop="toggleBookSelect(index)">
@@ -34,19 +35,21 @@
                 <i class="iconfont icon-shanchu" />
               </div>
             </div> -->
-          </swiper-slide>
-        </swiper>
-      </div>
+            </swiper-slide>
+          </swiper>
+        </div>
       <!-- <div class="book-upload-btn" @click.stop="uploadBook"><i class="iconfont icon-shangchuan2" /></div> -->
+      </div>
+      <div style="display: flex; flex-direction: column; justify-content: flex-start;">
+        <el-button size="mini" type="primary" @click.stop="uploadBook"><i class="iconfont icon-shangchuan" />图书上传</el-button>
+        <el-button :loading="deleteLoading" size="mini" style="margin-left: 0 !important; margin-top: 10px;" :disabled="!hasSelectedItems" @click="batchDelete">
+          <i class="iconfont icon-shanchu" />
+          批量删除
+        </el-button>
+      </div>
+      <addBookDialog ref="addBookRef" @refresh="updateBookItem" />
     </div>
-    <div style="display: flex; flex-direction: column; justify-content: flex-start;">
-      <el-button size="mini" type="primary" @click.stop="uploadBook"><i class="iconfont icon-shangchuan" />图书上传</el-button>
-      <el-button :loading="deleteLoading" size="mini" style="margin-left: 0 !important; margin-top: 10px;" :disabled="!hasSelectedItems" @click="batchDelete">
-        <i class="iconfont icon-shanchu" />
-        批量删除
-      </el-button>
-    </div>
-    <addBookDialog ref="addBookRef" @refresh="updateBookItem" />
+    <div class="config-remarks" style="margin-top: 20px;">推荐图书数量大于等于20本，显示效果最佳！当前已上传数量<span style="color: #0c0e1e; font-weight: bold;"> {{ bookList.length }}</span> 本<span v-if="bookList.length<20" style="color: #ed4a41; padding-left: 10px;">未达到展示的最佳效果</span></div>
   </div>
 </template>
 
diff --git a/src/views/digitalScreen/module/mediaSetting.vue b/src/views/digitalScreen/module/mediaSetting.vue
index f4fafbc..210a3ea 100644
--- a/src/views/digitalScreen/module/mediaSetting.vue
+++ b/src/views/digitalScreen/module/mediaSetting.vue
@@ -341,6 +341,7 @@ export default {
         } else {
           this.noticeTitle = '编辑通知'
           this.form = data
+          this.form.context = data.context.replace(/<br\/?>/g, '\n')
         }
         this.noticeDialogVisible = true
       } else {
@@ -375,6 +376,7 @@ export default {
           this.btnLoading = true
           if (form === 'form') {
             this.form.libcode = this.user.fonds.fondsNo
+            this.form.context = this.form.context.replace(/\n/g, '<br>')
             console.log(this.form)
             FetchEditScreenNotice(this.form).then((res) => {
               if (res.code !== 500) {