From 7ab9b0ce7d65579d7f05531394e3f86ece6a1fd9 Mon Sep 17 00:00:00 2001
From: xuhuajiao <13476289682@163.com>
Date: Tue, 31 Dec 2024 17:29:09 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8F=82=E6=95=B0=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/system/param.js                       |  13 +
 src/views/home.vue                            |   2 +-
 .../checkManage/bookshelfSearch/index.vue     | 262 +++++++++++++++++-
 .../checkManage/paramSetting/index.vue        | 153 ++++++++++
 4 files changed, 424 insertions(+), 6 deletions(-)
 create mode 100644 src/api/system/param.js
 create mode 100644 src/views/visualCheck/checkManage/paramSetting/index.vue

diff --git a/src/api/system/param.js b/src/api/system/param.js
new file mode 100644
index 0000000..a12fc1a
--- /dev/null
+++ b/src/api/system/param.js
@@ -0,0 +1,13 @@
+import request from '@/utils/request'
+
+export function verifyMaintenance(code) {
+  const params = {
+    code
+  }
+  return request({
+    url: 'api/dictionary/maintenanceVerification',
+    method: 'get',
+    params
+  })
+}
+export default { verifyMaintenance }
diff --git a/src/views/home.vue b/src/views/home.vue
index d47ac99..43899ac 100644
--- a/src/views/home.vue
+++ b/src/views/home.vue
@@ -15,7 +15,7 @@
                 <span :class="{'home-tab-active': flowableTabIndex == 0}">全部任务({{ flowableData.length !==0? flowableData.length: 0 }})</span>
                 <span :class="{'home-tab-active': flowableTabIndex == 1}">进行中({{ flowableData.length !==0? flowableData.length: 0 }})</span>
                 <span :class="{'home-tab-active': flowableTabIndex == 2}">已完成({{ flowableData.length !==0? flowableData.length: 0 }})</span>
-                <span :class="{'home-tab-active': flowableTabIndex == 3}" @click="toMoreProcess">更多流程</span>
+                <span :class="{'home-tab-active': flowableTabIndex == 3}" @click="toMoreProcess">更多任务</span>
               </div>
               <div class="home-flowable-list" style="height: calc(100% - 45px); overflow-y: auto; overflow-x: hidden;">
                 <el-table v-if="flowableData.length !== 0" height="calc(100%)" :data="flowableData" stripe style="width: 100%">
diff --git a/src/views/visualCheck/checkManage/bookshelfSearch/index.vue b/src/views/visualCheck/checkManage/bookshelfSearch/index.vue
index 61bcfdb..6459690 100644
--- a/src/views/visualCheck/checkManage/bookshelfSearch/index.vue
+++ b/src/views/visualCheck/checkManage/bookshelfSearch/index.vue
@@ -105,6 +105,20 @@
           </div>
           <div class="position-right">
             <h5>书架图</h5>
+            <div class="shelf-top">
+              <p v-for="(item,index) in reversedRackNum" :key="index" :style="{width: `calc(${'100%/' + rackNum} - 4px )`}"><span>{{ item + '架' }}</span></p>
+            </div>
+            <ul class="data-shelf-row">
+              <li
+                v-for="(cell,i) in booShelfGrid"
+                :key="i"
+                :class="{ active: i === cellIndex }"
+                class="data-shelf-cell"
+                :style="cellStyle"
+              >
+                <span class="cell-name">{{ removeAreaPrefix(cell.gridName) }}</span>
+              </li>
+            </ul>
           </div>
         </div>
       </div>
@@ -114,6 +128,7 @@
 </template>
 
 <script>
+import { FetchInitShelfGridByShelfId, FetchBookShelfDetails } from '@/api/shelf/index'
 import { FetchLibraryFloorListAll } from '@/api/floor/index'
 import { FetchInitLibraryRegionList } from '@/api/area/index'
 import crudShelf from '@/api/shelf/index'
@@ -159,17 +174,62 @@ export default {
       canvasPreview: {},
       width: 900,
       height: 600,
-      drawWidth: 2 // 笔触宽度
+      drawWidth: 2, // 笔触宽度
+      booShelfGrid: [],
+      rackNum: 0,
+      cellIndex: 12
     }
   },
   computed: {
     ...mapGetters([
       'user',
       'baseApi'
-    ])
+    ]),
+    cellStyle: function() {
+      // const h = '100%/' + this.layerNum
+      // const w = '100%/' + this.rackNum
+      const h = '38px'
+      const w = '100%/' + this.rackNum
+      return { width: `calc(${w} )`, height: `calc(${h})` }
+    },
+    reversedRackNum() {
+      if (this.booShelfGrid && this.booShelfGrid.length > 0) {
+        console.log('ddd')
+        console.log('this.booShelfGrid[0].gridShelf', this.booShelfGrid[0].gridShelf)
+        if (this.booShelfGrid[0].gridShelf === '07') {
+          return Array.from({ length: this.rackNum }, (_, i) => this.rackNum - i).map(x => x.toString())
+        } else {
+          return Array.from({ length: this.rackNum }, (_, i) => i + 1).map(x => x.toString())
+        }
+      } else {
+        console.log('fff')
+        return []
+      }
+    }
   },
-  created() {
+  async created() {
     this.getLibraryFloorListAll()
+    if (localStorage.getItem('dataScreenRegion')) {
+      const dataScreenRegion = JSON.parse(localStorage.getItem('dataScreenRegion'))
+      this.floorName = dataScreenRegion.floorName
+      this.regionName = dataScreenRegion.regionName
+      this.rowType = dataScreenRegion.rowType
+      // 单面/双面
+      this.tabListData = dataScreenRegion.rowType === 1
+        ? dataScreenRegion.toward === 1
+          ? [{ name: 'A面' }]
+          : [{ name: 'B面' }]
+        : [{ name: 'A面' }, { name: 'B面' }]
+
+      FetchBookShelfDetails({ 'shelfId': dataScreenRegion.id }).then(res => {
+        this
+        this.layerNum = res.shelfFloor
+        this.rackNum = res.shelfShelf
+        this.bookShelfDetails = res
+        this.getInitShelfGridByShelfId(this.bookShelfDetails.toward)
+      }).catch(() => {
+      })
+    }
   },
   methods: {
     [CRUD.HOOK.beforeRefresh]() {
@@ -187,6 +247,120 @@ export default {
     [CRUD.HOOK.afterValidateCU](crud) {
       return false
     },
+    removeAreaPrefix(gridNames) {
+      const index = gridNames.indexOf('面')
+      if (index !== -1) {
+        return gridNames.substring(index + 1)
+      }
+      return gridNames
+    },
+    getInitShelfGridByShelfId(toward) {
+      this.listLoading = true
+      // rowType 1 单 2 双
+      // toward 1 A面  2 B面
+      // shelfType 1 '始终最左边为第1架（S型排架）'
+      // shelfType 2 'A面最左为第1架（B面最左为最后1架）'
+      // shelfType 3 'B面最左为第1架（A面最左为最后1架）'
+      // floorType 1 '最顶层为第一层（从上至下）'
+      // floorType 2 '最底层为第一层（从下至上）'
+      FetchInitShelfGridByShelfId({ 'shelfId': this.bookShelfDetails.id, 'toward': toward }).then(res => {
+        const sortFunction = toward === 1 ? {
+          1: { 1: 'sortBookshelvesLeftTop', 2: 'sortBookshelvesLeftBottom' },
+          2: { 1: 'sortBookshelvesLeftTop', 2: 'sortBookshelvesLeftBottom' },
+          3: { 1: 'sortBookshelvesRightTop', 2: 'sortBookshelvesRightBottom' }
+        } : {
+          1: { 1: 'sortBookshelvesLeftTop', 2: 'sortBookshelvesLeftBottom' },
+          2: { 1: 'sortBookshelvesRightTop', 2: 'sortBookshelvesRightBottom' },
+          3: { 1: 'sortBookshelvesLeftTop', 2: 'sortBookshelvesLeftBottom' }
+        }
+        const shelfType = this.bookShelfDetails.shelfType
+        const floorType = this.bookShelfDetails.floorType
+        const sortMethod = sortFunction[shelfType][floorType]
+        this.booShelfGrid = this[sortMethod](res)
+
+        console.log(this.booShelfGrid[0].gridShelf)
+
+        this.popoverVisible = Array(this.booShelfGrid.length).fill(false)
+        setTimeout(() => {
+          this.listLoading = false
+        }, 1000)
+      }).catch(() => {
+      })
+    },
+    // 最左为第一架, 最顶层为第一层   从上往下
+    sortBookshelvesLeftTop(data) {
+      const sortedData = []
+      const maxFloor = Math.max(...data.map(item => parseInt(item.gridFloor)))
+      const maxShelf = Math.max(...data.map(item => parseInt(item.gridShelf.slice(-1))))
+
+      for (let i = 1; i <= maxFloor; i++) {
+        for (let j = 1; j <= maxShelf; j++) {
+          const currentShelf = data.find(item => parseInt(item.gridFloor) === i && parseInt(item.gridShelf.slice(-1)) === j)
+          if (currentShelf) {
+            sortedData.push(currentShelf)
+          }
+        }
+      }
+      return sortedData
+    },
+    // 最右为第一架,最左为最后一架, 最顶层为第一层   从上往下
+    sortBookshelvesRightTop(data) {
+      const sortedData = []
+      // 获取最大的楼层数
+      const maxFloor = Math.max(...data.map(item => parseInt(item.gridFloor)))
+      const maxShelf = Math.max(...data.map(item => parseInt(item.gridShelf.match(/\d+$/)[0])))
+      for (let i = 1; i <= maxFloor; i++) {
+        // 从最大的书架层数开始，向下排序
+        for (let j = maxShelf; j >= 1; j--) {
+          const currentShelf = data.find(item => parseInt(item.gridFloor) === i && parseInt(item.gridShelf.match(/\d+$/)[0]) === j)
+          if (currentShelf) {
+            sortedData.push(currentShelf)
+          }
+        }
+      }
+      return sortedData
+    },
+    // 最左为第一架, 最底层为第一层   从下往上
+    sortBookshelvesLeftBottom(data) {
+      const sortedData = []
+      // 获取最大的楼层数
+      const maxFloor = Math.max(...data.map(item => parseInt(item.gridFloor)))
+      // 获取最大的书架层数
+      const maxShelf = Math.max(...data.map(item => parseInt(item.gridShelf.slice(-1))))
+      for (let i = maxFloor; i >= 1; i--) {
+        for (let j = 1; j <= maxShelf; j++) {
+          const currentShelf = data.find(item => parseInt(item.gridFloor) === i && parseInt(item.gridShelf.slice(-1)) === j)
+          if (currentShelf) {
+            sortedData.push(currentShelf)
+          }
+        }
+      }
+      return sortedData
+    },
+    // 最左为最后一架, 最底层为第一层    从下往上
+    sortBookshelvesRightBottom(data) {
+      const sortedData = []
+      // 获取最大的楼层数
+      const maxFloor = Math.max(...data.map(item => parseInt(item.gridFloor)))
+      const maxShelfPerFloor = data.map(item => parseInt(item.gridShelf.match(/\d+$/)[0]))
+        .reduce((acc, curr, index, arr) => {
+          const floor = parseInt(data[index].gridFloor)
+          if (!acc[floor]) acc[floor] = 1
+          if (acc[floor] < curr) acc[floor] = curr
+          return acc
+        }, {})
+      // 从最大的楼层开始向下遍历
+      for (let i = maxFloor; i >= 1; i--) {
+        // 从最大的书架编号开始向左遍历
+        for (let j = maxShelfPerFloor[i] || 1; j >= 1; j--) {
+          const currentShelf = data.find(item => parseInt(item.gridFloor) === i && parseInt(item.gridShelf.match(/\d+$/)[0]) === j)
+          if (currentShelf) {
+            sortedData.push(currentShelf)
+          }
+        }
+      }
+      return sortedData
+    },
     changeBeforeFloor(val) {
       if (val) {
         this.selectFloorVal = val
@@ -381,7 +555,7 @@ export default {
 }
 .positionDialog{
   ::v-deep .el-dialog{
-    width: 1200px !important;
+    width: 1300px !important;
     .el-dialog__body{
       padding: 0 !important;
     }
@@ -416,7 +590,8 @@ export default {
 .position-content{
   display: flex;
   justify-content: space-between;
-  padding: 20px 30px !important;
+  align-items: flex-start;
+  padding: 20px 0 !important;
   h5{
     font-size: 18px;
     color: #0C0E1E;
@@ -428,5 +603,82 @@ export default {
       height: 500px;
     }
   }
+  .position-right{
+    width: 640px;
+    margin-left: 20px;
+  }
+}
+
+.shelf-top{
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  text-align: center;
+  margin-top: 30px;
+  p{
+    font-size: 12px;
+    color: #fff;
+    height: 30px;
+    line-height: 26px;
+    background: url('~@/assets/images/shelf04.png') no-repeat center top;
+    background-size: auto 100%;
+  }
+}
+
+.data-shelf-row{
+  display: flex;
+  flex: 1;
+  flex-wrap: wrap;
+  text-align: center;
+  .data-shelf-cell{
+    position: relative;
+    font-size: 12px;
+    color: #0C0E1E;
+    background: url('~@/assets/images/shelf02.png') repeat-x left top;
+    background-size: 20% 100%;
+    border-radius: 3px;
+    cursor: pointer;
+    &::before{
+      content: "";
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 6px;
+      height: 38px;
+      background: url('~@/assets/images/shelf01.png') no-repeat left top;
+      background-size: 100% 100%;
+    }
+    &::after{
+      content: "";
+      position: absolute;
+      right: -4px;
+      top: 0;
+      width: 6px;
+      height: 38px;
+      background: url('~@/assets/images/shelf01.png') no-repeat left top;
+      background-size: 100% 100%;
+    }
+    .cell-name{
+      display: block;
+      width: 100%;
+      line-height: 38px;
+    }
+    &.active{
+      color: #fff;
+      span{
+        position: relative;
+        display: block;
+        &::before{
+          position: absolute;
+          top: 0;
+          left: 6px;
+          content: '';
+          width: 100%;
+          height: 100%;
+          background-color: rgba(255,0,0,.3);
+        }
+      }
+    }
+  }
 }
 </style>
diff --git a/src/views/visualCheck/checkManage/paramSetting/index.vue b/src/views/visualCheck/checkManage/paramSetting/index.vue
new file mode 100644
index 0000000..f390c0b
--- /dev/null
+++ b/src/views/visualCheck/checkManage/paramSetting/index.vue
@@ -0,0 +1,153 @@
+<template>
+  <div class="app-container  row-container">
+    <div class="container-wrap">
+      <span class="right-top-line" />
+      <span class="left-bottom-line" />
+      <el-form ref="form" :rules="rules" :model="form" size="small" label-width="120px" style="display: flex; justify-content: flex-start;">
+        <el-form-item label="AI处理终端IP" prop="ip">
+          <el-input v-model="form.ip" placeholder="请输入IP地址，如：192.168.1.1" style="width: 300px;" />
+        </el-form-item>
+        <p style="line-height: 32px; margin-left: 20px; font-size: 12px;">设置成功后，方可执行视觉盘点任务（该参数设置需要超级管理员权限授权）</p>
+      </el-form>
+      <el-button style="margin-left: 30px;" :loading="crud.status.cu === 2" type="primary" @click="toVerify">保存</el-button>
+    </div>
+
+    <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>
+  </div>
+</template>
+
+<script>
+import { encrypt } from '@/utils/rsaEncrypt'
+import crudParam, { verifyMaintenance } from '@/api/system/param'
+import CRUD, { presenter, header, form, crud } from '@crud/crud'
+import { mapGetters } from 'vuex'
+
+const defaultForm = { id: null, ip: '' }
+
+export default {
+  name: 'ParamSetting',
+  components: { },
+  cruds() {
+    return CRUD({
+      title: '参数设置',
+      url: 'api/database/databaseList',
+      crudMethod: { ...crudParam },
+      sort: [],
+      optShow: {
+        add: true,
+        edit: false,
+        del: false,
+        download: false,
+        group: false,
+        reset: false
+      }
+    })
+  },
+  mixins: [presenter(), header(), form(defaultForm), crud()],
+  data() {
+    return {
+      permission: {
+        add: ['admin', 'paramSetting:add'],
+        edit: ['admin', 'paramSetting:edit'],
+        del: ['admin', 'paramSetting:del']
+      },
+      verifyDialogVisible: false,
+      verfiyForm: {
+        verifyCode: ''
+      },
+      showVerifyDialog: true,
+      rules: {
+        ip: [
+          { required: true, message: 'AI处理终端IP不可为空', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'baseApi'
+    ])
+  },
+  created() {
+  },
+  methods: {
+    [CRUD.HOOK.beforeToCU](crud, form, btn) {
+      if (this.showVerifyDialog) {
+        // 打开输入验证码对话框
+        this.verifyDialogVisible = true
+        return false
+      }
+    },
+    [CRUD.HOOK.beforeRefresh]() {
+    },
+    // 提交前的验证
+    [CRUD.HOOK.afterValidateCU](crud) {
+      console.log(crud.form)
+      return true
+    },
+    toVerify(btn) {
+      if (this.form.ip) {
+        if (this.showVerifyDialog) {
+        // 打开输入验证码对话框
+          this.verifyDialogVisible = true
+          return false
+        }
+      } else {
+        this.$refs.form.validateField(['ip'], err => {
+          console.log('err', err)
+          if (err) {
+            return
+          }
+        })
+      }
+    },
+    handleConfirm() {
+      verifyMaintenance(encrypt(this.verfiyForm.verifyCode)).then((res) => {
+        if (res) {
+          // 关闭输入验证码对话框
+          this.verifyDialogVisible = false
+          this.verfiyForm.verifyCode = ''
+          this.showVerifyDialog = false
+          //  this.crud.form.ip
+          // crudSql.FetchBackupName().then((data) => {
+          //  console.log('data',data)
+          // }).catch(err => {
+          //   console.log(err)
+          // })
+        } else {
+          this.$message({ message: '验证码错误！', type: 'error', offset: 8 })
+        }
+      })
+    },
+    handleClose() {
+      if (this.$refs.verfiyForm) {
+        this.verfiyForm.verifyCode = ''
+        this.$refs.verfiyForm.resetFields()
+        this.verifyDialogVisible = false
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep div.el-dialog__footer {
+  text-align: center;
+}
+</style>