大屏数据

3 weeks ago · 5f61ceae03
4 changed files with 133 additions and 54 deletions
--- 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
--- 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,6 +555,7 @@ export default {

 <style lang="scss" scoped>
@import "~@/assets/styles/digitalScreen.scss";
+.geoInput{
  .edit-readonly{
    width: 800px !important;
    height: 110px !important;
@ -516,16 +563,21 @@ export default {
    overflow: hidden;
    overflow-y: scroll;
  }
+}
+
 .areaForm{
-  ::v-deep .el-form-item__content {
+  ::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>
--- a/src/views/digitalScreen/module/bookRecommend.vue
+++ b/src/views/digitalScreen/module/bookRecommend.vue
@ -1,4 +1,5 @@
 <template>
+  <div>
    <div class="config-item-main">
      <span class="data-title">图书推荐</span>
      <div class="upload-item">
@ -48,6 +49,8 @@
      </div>
      <addBookDialog ref="addBookRef" @refresh="updateBookItem" />
    </div>
+    <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>

 <script>
--- 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) {