From adf65f1ba0bf2c17826821c85d042a32fe6c7370 Mon Sep 17 00:00:00 2001
From: xuhuajiao <13476289682@163.com>
Date: Thu, 9 Oct 2025 17:17:26 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B1=82=E4=BD=8D=E6=9E=B6=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/deviceManage/map/indexv3.vue        |   4 +-
 .../shelfManage/codeRules copy.vue            | 267 ++++++++++
 .../deviceManage/shelfManage/codeRules.vue    | 468 ++++++++++++++++++
 3 files changed, 737 insertions(+), 2 deletions(-)
 create mode 100644 src/views/deviceManage/shelfManage/codeRules copy.vue
 create mode 100644 src/views/deviceManage/shelfManage/codeRules.vue

diff --git a/src/views/deviceManage/map/indexv3.vue b/src/views/deviceManage/map/indexv3.vue
index 35d516e..9472f17 100644
--- a/src/views/deviceManage/map/indexv3.vue
+++ b/src/views/deviceManage/map/indexv3.vue
@@ -546,13 +546,13 @@ export default {
           <div style="display: inline-block; width: 200px; text-align: center;">
             <div style="display: flex; margin-bottom: 10px; border-radius: 6px; background-color: white; text-align: center;">
               <span 
-                style="flex: 1; height: 30px; color: white; padding: 10px 16px; line-height: 30px; background-color: #2F65EE; border-radius: 6px 0 0 6px; cursor: pointer;"
+                style="flex: 1; color: white; padding: 6px 16px; line-height: 30px; background-color: #2F65EE; border-radius: 6px 0 0 6px; cursor: pointer;"
                 onclick="window.vueInstance.setStart()"
               >
                 作为起点
               </span>
               <span 
-                style="flex: 1; height: 30px; padding: 10px 16px; line-height: 30px; cursor: pointer;"
+                style="flex: 1;  padding: 6px 16px; line-height: 30px; cursor: pointer;"
                 onclick="window.vueInstance.setEnd()"
               >
                 作为终点
diff --git a/src/views/deviceManage/shelfManage/codeRules copy.vue b/src/views/deviceManage/shelfManage/codeRules copy.vue
new file mode 100644
index 0000000..4d6ef0f
--- /dev/null
+++ b/src/views/deviceManage/shelfManage/codeRules copy.vue	
@@ -0,0 +1,267 @@
+<template>
+  <div class="app-container" style=" padding: 20px; height: calc(100vh - 140px); background-color: #fff;">
+    <div style="display: flex; justify-content: flex-start;">
+      <div class="code-rules-left">
+        <div class="code-rules-content">
+          <div
+            v-for="(item,index) in field"
+            :key="`position-${index}`"
+            class="rules-item"
+            :class="{ active: hoverIndex === index }"
+            @mouseenter="handleItemHover(index)"
+            @mouseleave="handleItemLeave"
+          >
+            <p>第{{ index+1 }}位</p>
+            <span v-if="index < field.length - 1" />
+          </div>
+        </div>
+        <div class="code-rules-content code-rules-field">
+          <div
+            v-for="(item, index) in field"
+            :key="`field-${index}`"
+            class="rules-item"
+            :class="{ active: hoverIndex === index }"
+            @mouseenter="handleItemHover(index)"
+            @mouseleave="handleItemLeave"
+          >
+            <p>{{ item.name }}</p>
+            <span v-if="index < field.length - 1">-</span>
+          </div>
+        </div>
+      </div>
+      <div class="code-rules-right">
+        <div class="code-rules-tip">
+          <span style="display: block; padding-bottom: 6px; font-weight: bold;">说明：</span>
+          书架的层架位编码规则可根据图书馆现行方案进行设置。本系统默认的规则为：区-排-面-架-层。<br>
+          显示时可根据设置决定是否需要在编号第1位加入“机构编号”。
+        </div>
+        <div
+          v-for="(item, index) in [...field].reverse()"
+          :key="`field-${index}`"
+          :class="['rules-item-remark', `remark-${index+1}`, { 'remark-active': hoverIndex === (field.length - 1 - index) }]"
+          @mouseenter="handleRemarkHover(field.length - 1 - index)"
+          @mouseleave="handleRemarkLeave"
+        >
+          <span>{{ item.name }}：</span>
+          <p v-html="item.remark" />
+        </div>
+      </div>
+    </div>
+    <div class="code-rules-setting" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CodeRules',
+  data() {
+    return {
+      field: [
+        { name: '机构', remark: '可在本系统的“系统设置-机构管理”中进行设置。注意：一般因机构名称较长，中文显示时会省略。<br/> 例如：中文显示【智慧图书馆或不显示】、编号显示【FTZN】' },
+        { name: '区域', remark: '可在本系统的“场馆设备管理-区域管理”中进行设置。注意：区域编号不可重复！<br/>例如：中文显示【成人阅览室】、编号显示【01】' },
+        { name: '排', remark: '根据书架的实际位置设置。通常情况用3位数字进行标识，不足3位的在前面补“0”。 <br/>例如：中文显示【001排】、编号显示【001】' },
+        { name: '面', remark: ' 根据书架的实际情况设置。通常书架有两面（靠墙则为单面）。用字母A、B或数字1、2标识。 <br/>例如：中文显示【A面】、编号显示【A或1】' },
+        { name: '架/列', remark: '根据书架的实际情况设置。通常情况用2位数字进行标识，不足2位的在前面补“0”。<br/> 例如：中文显示【01架】、编号显示【01】' },
+        { name: '层', remark: '根据书架的实际情况设置。通常情况下书架为6层，用1位数字进行标识。 <br/>例如：中文显示【6层】、编号显示【6】' }
+      ],
+      hoverIndex: -1 // 用于追踪当前悬停的索引
+    }
+  },
+  methods: {
+    // 处理备注项的鼠标进入事件
+    handleRemarkHover(index) {
+      this.hoverIndex = index
+    },
+    // 处理备注项的鼠标离开事件
+    handleRemarkLeave() {
+      this.hoverIndex = -1
+    },
+    // 处理项目项的鼠标进入事件
+    handleItemHover(index) {
+      this.hoverIndex = index
+    },
+    // 处理项目项的鼠标离开事件
+    handleItemLeave() {
+      this.hoverIndex = -1
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.code-rules-left{
+  width: 520px;
+}
+.code-rules-right{
+  flex: 1;
+  margin-left: 30px;
+}
+.code-rules-content{
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  text-align: center;
+  height: 36px;
+  line-height: 36px;
+  margin-bottom: 20px;
+  font-size: 14px;
+  .rules-item{
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    text-align: center;
+    p{
+      width: 70px;
+      background-color: #909399;
+      border:1px solid #909399;
+      color: #fff;
+      border-radius: 4px;
+      transition: all 0.3s ease;
+    }
+    span{
+      display: block;
+      width: 20px;
+    }
+    &.active {
+      p {
+        border-color: #0348f3;
+        background-color: #0348f3;
+      }
+    }
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+.code-rules-field{
+  .rules-item{
+    p{
+      background-color: transparent;
+      border-color: #545b65;
+      color: #545b65;
+      font-weight: bold;
+    }
+    &.active{
+      p{
+        border-color: #0348f3;
+        color: #fff;
+      }
+    }
+  }
+}
+
+.code-rules-tip{
+  height: 93px;
+  padding: 6px 10px;
+  background-color: #eef5fe;
+  color: #545b65;
+  line-height: 24px;
+  border-left: 3px solid #0348f3;
+  font-size: 14px;
+}
+
+.rules-item-remark{
+  position: relative;
+  display: flex;
+  justify-content: flex-start;
+  margin-top: 15px;
+  padding: 8px;
+  background-color: #eef5fe;
+  font-size: 14px;
+  line-height: 22px;
+  border-radius: 4px;
+  transition: all 0.3s ease;
+  &::before{
+    content: '';
+    position: absolute;
+    bottom: 30px;
+    width: 2px;
+    border-left: 1px dashed #9098a4;
+  }
+  &::after{
+    content: '';
+    position: absolute;
+    bottom: 30px;
+    height: 2px;
+    border-bottom: 1px dashed #9098a4;
+  }
+  span{
+    display: block;
+    width: 46px;
+  }
+  &:hover, &.remark-active{
+    cursor: pointer;
+    color: #fff;
+    background-color: #0348f3;
+    &::before{
+      content: '';
+      border-left: 1px dashed #0348f3;
+    }
+    &::after{
+      content: '';
+      border-bottom: 1px dashed #0348f3;
+    }
+  }
+
+  &.remark-1{
+    &::before{
+      height: 45px;
+      left: -65px;
+    }
+    &::after{
+      width: 65px;
+      left: -65px;
+    }
+  }
+  &.remark-2{
+    &::before{
+      height: 120px;
+      left: -155px;
+    }
+    &::after{
+      width: 155px;
+      left: -155px;
+    }
+  }
+  &.remark-3{
+    &::before{
+      height: 195px;
+      left: -245px;
+    }
+    &::after{
+      width: 245px;
+      left: -245px;
+    }
+  }
+  &.remark-4{
+    &::before{
+      height: 270px;
+      left: -336px;
+    }
+    &::after{
+      width: 336px;
+      left: -336px;
+    }
+  }
+  &.remark-5{
+    &::before{
+      height: 345px;
+      left: -425px;
+    }
+    &::after{
+      width: 425px;
+      left: -425px;
+    }
+  }
+  &.remark-6{
+    &::before{
+      height: 420px;
+      left: -514px;
+    }
+    &::after{
+      width: 514px;
+      left: -514px;
+    }
+  }
+}
+</style>
diff --git a/src/views/deviceManage/shelfManage/codeRules.vue b/src/views/deviceManage/shelfManage/codeRules.vue
new file mode 100644
index 0000000..6a768e4
--- /dev/null
+++ b/src/views/deviceManage/shelfManage/codeRules.vue
@@ -0,0 +1,468 @@
+<template>
+  <div class="app-container" style=" padding: 20px; height: calc(100vh - 140px); background-color: #fff;">
+    <div style="display: flex; justify-content: flex-start;">
+      <div class="code-rules-left">
+        <div class="code-rules-content">
+          <div
+            v-for="(item,index) in field"
+            :key="`position-${index}`"
+            class="rules-item"
+            :class="{ active: hoverIndex === index }"
+            @mouseenter="handleItemHover(index)"
+            @mouseleave="handleItemLeave"
+          >
+            <p>第{{ index+1 }}位</p>
+            <span v-if="index < field.length - 1" />
+          </div>
+        </div>
+        <div class="code-rules-content code-rules-field">
+          <div
+            v-for="(item, index) in field"
+            :key="`field-${index}`"
+            class="rules-item"
+            :class="{ active: hoverIndex === index }"
+
+            @mouseenter="handleItemHover(index)"
+            @mouseleave="handleItemLeave"
+          >
+            <p>{{ item.name }}</p>
+            <span v-if="index < field.length - 1">-</span>
+          </div>
+        </div>
+      </div>
+      <div class="code-rules-right">
+        <div class="code-rules-tip">
+          <span style="display: block; padding-bottom: 6px; font-weight: bold;">说明：</span>
+          书架的层架位编码规则可根据图书馆现行方案进行设置。本系统默认的规则为：区-排-面-架-层。<br>
+          显示时可根据设置决定是否需要在编号第1位加入“机构编号”。
+        </div>
+        <div
+          v-for="(item, index) in [...field].reverse()"
+          :key="`field-${index}`"
+          :style="{
+            '--remark-left': -(65 + 89 * index) + 'px',
+            '--remark-height': 45 + 75 * index + 'px',
+            '--remark-width': Math.abs(65 + 89 * index) + 'px'
+          }"
+          :class="['rules-item-remark', { 'remark-active': hoverIndex === (field.length - 1 - index) }]"
+          @mouseenter="handleRemarkHover(field.length - 1 - index)"
+          @mouseleave="handleRemarkLeave"
+        >
+          <span>{{ item.name }}：</span>
+          <p v-html="item.remark" />
+        </div>
+      </div>
+    </div>
+    <el-card class="code-rules-setting">
+      <p class="setting-title">当前设置</p>
+      <ul class="setting-list">
+        <li>
+          <span>中文显示规则：</span>
+          <p>区域-排-面-架/列-层</p>
+        </li>
+        <li>
+          <span>例如：</span>
+          <p>01区001排A面01架6层</p>
+        </li>
+        <li>
+          <span>编号显示规则：</span>
+          <p>机构-区域-排-面-架/列-层 </p>
+        </li>
+        <li>
+          <span>例如：</span>
+          <p>FTZN-01-001-A-01-6</p>
+        </li>
+      </ul>
+      <el-button size="mini" @click="toVerify('reset')">
+        <i class="iconfont icon-zishebeiguanli" />
+        规则设置
+      </el-button>
+    </el-card>
+
+    <el-dialog class="tip-dialog tip-middle-dialog" title="操作提示" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :visible.sync="verifyDialogVisible" :before-close="handleClose">
+      <div class="setting-dialog">
+        <div class="tip-content">
+          <p class="tipMsg">这里为技术人员维护系统时使用，普通用户无需设置</p>
+          <p class="delt-tip"><span>注意：强行修改会导致数据异常或丢失！如果用户强行修改，本系统不负责因此导致的相关后果！</span></p>
+        </div>
+        <el-form ref="verfiyForm" :model="verfiyForm" style="margin-top:30px;" @submit.native.prevent>
+          <el-form-item label="维护验证码" label-width="110px">
+            <el-input v-model="verfiyForm.verifyCode" show-password style="width: 480px;" />
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="handleClose">取消 </el-button>
+          <el-button type="primary" @click.native="handleConfirm">确定</el-button>
+        </div>
+      </div>
+    </el-dialog>
+
+    <el-dialog title="规则设置" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :visible.sync="settingDialog" :before-close="handleClose">
+      <div class="setting-dialog">
+        <div class="setting-tip"><i class="iconfont icon-zhuyi-lan" /><span>“机构编码”只能显示在最前，其他项目可根据机构的现行规则修改显示顺序 (使用鼠标拖拽完成操作) ！</span></div>
+        <el-checkbox v-model="isConnector">编号显示时加入连接字符“-”</el-checkbox>
+
+        <div class="config-field">
+          <div
+            v-for="(item,index) in field"
+            :key="index"
+            class="config-field-item"
+            :data-index="index"
+          >
+            {{ item.name }}
+          </div>
+        </div>
+
+        <div style="padding: 10px; background-color: #eef5fe;">
+          <p class="setting-title">当前设置</p>
+          <ul class="setting-list">
+            <li>
+              <span>中文显示规则：</span>
+              <p>区域-排-面-架/列-层</p>
+            </li>
+            <li>
+              <span>例如：</span>
+              <p>01区001排A面01架6层</p>
+            </li>
+            <li>
+              <span>编号显示规则：</span>
+              <p>机构-区域-排-面-架/列-层 </p>
+            </li>
+            <li>
+              <span>例如：</span>
+              <p>FTZN-01-001-A-01-6</p>
+            </li>
+          </ul>
+        </div>
+
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="handleClose">取消 </el-button>
+          <el-button type="primary" @click.native="handleRulesConfirm">确定</el-button>
+        </div>
+      </div>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import { encrypt } from '@/utils/rsaEncrypt'
+import { verifyMaintenance } from '@/api/system/param'
+import Sortable from 'sortablejs'
+export default {
+  name: 'CodeRules',
+  data() {
+    return {
+      field: [
+        { id: 1, name: '机构', remark: '可在本系统的“系统设置-机构管理”中进行设置。注意：一般因机构名称较长，中文显示时会省略。<br/> 例如：中文显示【智慧图书馆或不显示】、编号显示【FTZN】' },
+        { id: 2, name: '区域', remark: '可在本系统的“场馆设备管理-区域管理”中进行设置。注意：区域编号不可重复！<br/>例如：中文显示【成人阅览室】、编号显示【01】' },
+        { id: 3, name: '排', remark: '根据书架的实际位置设置。通常情况用3位数字进行标识，不足3位的在前面补“0”。 <br/>例如：中文显示【001排】、编号显示【001】' },
+        { id: 4, name: '面', remark: ' 根据书架的实际情况设置。通常书架有两面（靠墙则为单面）。用字母A、B或数字1、2标识。 <br/>例如：中文显示【A面】、编号显示【A或1】' },
+        { id: 5, name: '架/列', remark: '根据书架的实际情况设置。通常情况用2位数字进行标识，不足2位的在前面补“0”。<br/> 例如：中文显示【01架】、编号显示【01】' },
+        { id: 6, name: '层', remark: '根据书架的实际情况设置。通常情况下书架为6层，用1位数字进行标识。 <br/>例如：中文显示【6层】、编号显示【6】' }
+      ],
+      hoverIndex: -1,
+      verifyDialogVisible: false,
+      verfiyForm: {
+        verifyCode: ''
+      },
+      verifyStatus: '',
+      showVerifyDialog: true,
+      settingDialog: true,
+      isConnector: false
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'baseApi'
+    ])
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.draggableScreen()
+    })
+  },
+  methods: {
+    handleRemarkHover(index) {
+      this.hoverIndex = index
+    },
+    handleRemarkLeave() {
+      this.hoverIndex = -1
+    },
+    handleItemHover(index) {
+      this.hoverIndex = index
+    },
+    handleItemLeave() {
+      this.hoverIndex = -1
+    },
+    toVerify(btn) {
+      this.verifyStatus = btn
+      this.verifyDialogVisible = true
+    },
+    handleConfirm() {
+      verifyMaintenance(encrypt(this.verfiyForm.verifyCode)).then((res) => {
+        if (res) {
+          this.verifyDialogVisible = false
+          this.verfiyForm.verifyCode = ''
+          this.showVerifyDialog = false
+          this.settingDialog = true
+          this.draggableScreen()
+        } else {
+          this.$message({ message: '验证码错误！', type: 'error', offset: 8 })
+        }
+      })
+    },
+    draggableScreen() {
+      const container = document.querySelector('.config-field')
+      const that = this
+      let originalOrder = [...this.field.map(item => item.id)]
+      Sortable.create(container, {
+        draggable: '.config-field-item',
+        animation: 150,
+        onStart() {
+          originalOrder = [...that.field.map(item => item.id)]
+        },
+        onEnd({ newIndex, oldIndex }) {
+          if (newIndex === oldIndex) return
+
+          // 执行元素移动操作
+          const movedItem = that.field.splice(oldIndex, 1)[0]
+          that.field.splice(newIndex, 0, movedItem)
+
+          // 检查顺序是否真的发生了变化
+          const newOrder = [...that.field.map(item => item.id)]
+          console.log('newOrder', newOrder)
+          if (!that.arraysEqual(originalOrder, newOrder)) {
+            // 顺序变化，提交show_screen数据
+            // that.submitScreenOrderAndStatus()
+          }
+        }
+      })
+    },
+    arraysEqual(arr1, arr2) {
+      if (arr1.length !== arr2.length) return false
+      for (let i = 0; i < arr1.length; i++) {
+        if (arr1[i] !== arr2[i]) return false
+      }
+      return true
+    },
+    handleRulesConfirm() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          const param = {
+            'code': 'preview_url',
+            'context': this.form.preview_url,
+            'remarks': null
+          }
+          console.log('param', param)
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    },
+    handleClose() {
+      if (this.$refs.verfiyForm) {
+        this.verfiyForm.verifyCode = ''
+        this.$refs.verfiyForm.resetFields()
+        this.verifyDialogVisible = false
+      }
+      this.settingDialog = false
+      if (this.$refs.form) {
+
+        // this.form.preview_url = ''
+        // this.$refs.form.resetFields()
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.code-rules-left{
+  // width: 520px;
+}
+.code-rules-right{
+  flex: 1;
+  margin-left: 30px;
+  position: relative;
+}
+.code-rules-content{
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  text-align: center;
+  height: 36px;
+  line-height: 36px;
+  margin-bottom: 20px;
+  font-size: 14px;
+  .rules-item{
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    text-align: center;
+    p{
+      width: 70px;
+      background-color: #909399;
+      border:1px solid #909399;
+      color: #fff;
+      border-radius: 4px;
+      transition: all 0.3s ease;
+    }
+    span{
+      display: block;
+      width: 20px;
+    }
+    &.active {
+      p {
+        border-color: #0348f3;
+        background-color: #0348f3;
+      }
+    }
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+.code-rules-field{
+  .rules-item{
+    p{
+      background-color: transparent;
+      border-color: #545b65;
+      color: #545b65;
+      font-weight: bold;
+    }
+    &.active{
+      p{
+        border-color: #0348f3;
+        color: #fff;
+      }
+    }
+  }
+}
+
+.code-rules-tip{
+  height: 93px;
+  padding: 6px 10px;
+  background-color: #eef5fe;
+  color: #545b65;
+  line-height: 24px;
+  border-left: 3px solid #0348f3;
+  font-size: 14px;
+}
+
+.rules-item-remark{
+  position: relative;
+  display: flex;
+  justify-content: flex-start;
+  margin-top: 15px;
+  padding: 8px;
+  background-color: #eef5fe;
+  font-size: 14px;
+  line-height: 22px;
+  border-radius: 4px;
+  transition: all 0.3s ease;
+   &::before {
+    content: '';
+    position: absolute;
+    bottom: 30px;
+    width: 2px;
+    border-left: 1px dashed #9098a4;
+    left: var(--remark-left);
+    height: var(--remark-height);
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: 30px;
+    height: 2px;
+    border-bottom: 1px dashed #9098a4;
+    left: var(--remark-left);
+    width: var(--remark-width);
+  }
+  span{
+    display: block;
+    width: 46px;
+  }
+  &:hover, &.remark-active{
+    cursor: pointer;
+    color: #fff;
+    background-color: #0348f3;
+    &::before{
+      content: '';
+      border-left: 1px dashed #0348f3;
+    }
+    &::after{
+      content: '';
+      border-bottom: 1px dashed #0348f3;
+    }
+  }
+}
+
+.code-rules-setting{
+  position: relative;
+  padding: 20px;
+  margin-top: 40px;
+
+  .el-button{
+    position: absolute;
+    right: 20px;
+    bottom: 20px;
+  }
+}
+
+.setting-title{
+  color: #0c0e1e;
+  font-size: 16px;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+.setting-list{
+  display: flex;
+  flex-wrap: wrap;
+  width: 600px;
+  font-size: 14px;
+  li{
+    display: flex;
+    justify-content: flex-start;
+    line-height: 28px;
+    width: 50%;
+    span{
+      display: block;
+    }
+    p{
+      font-weight: bold;
+    }
+  }
+}
+
+.setting-tip{
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  line-height: 26px;
+  span{
+    display: inline-block;
+    font-size: 12px;
+    color: #545B65;
+  }
+  i{
+    display: inline-block;
+    color: #0348F3;
+  }
+}
+
+.config-field{
+  display: flex;
+  justify-content: flex-start;
+}
+
+.config-field-item{
+  width: 100px;
+  height: 100px;
+  border: 1px solid #0348F3;
+}
+</style>