Merge branch 'xhf' of http://git.znkjfw.com/ak/zn-admin-vue3-wcs into xhf

src/api/map/map.ts

@@ -125,7 +125,7 @@ export const getWareHouseLanePage = async (params) => {
 }
 //删除仓库点位地图
 export const deleteWareLaneArea = async (id: number) => {
-  return await request.delete({ url: `/system/ware/house-area/delete?id=` + id })
+  return await request.delete({ url: `/system/ware/house-lane/delete?id=` + id })
 }
 // 获取仓库点位连线
 export const mapLineGet = async (params) => {

src/layout/components/AppView.vue

@@ -21,6 +21,8 @@ const getCaches = computed((): string[] => {
 
 const tagsView = computed(() => appStore.getTagsView)
 
+const { currentRoute } = useRouter() // 路由
+
 //region 无感刷新
 const routerAlive = ref(true)
 // 无感刷新，防止出现页面闪烁白屏
@@ -35,6 +37,25 @@ provide('reload', reload)
 
 <template>
   <section
+    v-if="currentRoute.name === 'editMapPageRealTimeMap'"
+    :class="[
+      'w-full bg-[var(--app-content-bg-color)] dark:bg-[var(--el-bg-color)]',
+      {
+        '!min-h-[calc(100vh-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height))] pb-0':
+          footer
+      }
+    ]"
+  >
+    <router-view v-if="routerAlive">
+      <template #default="{ Component, route }">
+        <keep-alive :include="getCaches">
+          <component :is="Component" :key="route.fullPath" />
+        </keep-alive>
+      </template>
+    </router-view>
+  </section>
+  <section
+    v-else
     :class="[
       'p-[var(--app-content-padding)] w-full bg-[var(--app-content-bg-color)] dark:bg-[var(--el-bg-color)]',
       {

src/views/mapPage/realTimeMap/components-tool/itemAreaManagementDialog.vue

@@ -13,8 +13,8 @@
     >
       <el-table-column type="index" width="50" align="center" />
       <el-table-column prop="areaName" label="库区名称" align="center" />
-      <el-table-column prop="areaMsg" label="库区说明" align="center" />
+      <el-table-column prop="skuInfo" label="库区说明" align="center" />
-      <el-table-column label="操作" align="center">
+      <el-table-column label="操作" align="center" width="100">
         <template #default="scope">
           <el-button size="small" type="danger" @click="handleDelete(scope.row.id)">
             删除

src/views/mapPage/realTimeMap/components-tool/lineLibraryManagementDialog.vue

@@ -13,7 +13,6 @@
     >
       <el-table-column type="index" width="50" align="center" />
       <el-table-column prop="laneName" label="巷道名称" align="center" />
-      <el-table-column prop="laneMsg" label="巷道说明" align="center" />
       <el-table-column label="操作" align="center">
         <template #default="scope">
           <el-button size="small" type="danger" @click="handleDelete(scope.row.id)">

src/views/mapPage/realTimeMap/components-tool/map-scale-tool.vue

@@ -0,0 +1,464 @@
+<!-- 刻度尺 -->
+<template>
+  <div :style="wrapperStyle" class="vue-ruler-wrapper" onselectstart="return false;" ref="el">
+    <section>
+      <div ref="horizontalRuler" class="vue-ruler-h" @mousedown.stop="horizontalDragRuler">
+        <span
+          v-for="(item, index) in xScale"
+          :key="index"
+          :style="{ left: index * 50 + 2 + 'px' }"
+          class="n"
+          >{{ item.id }}</span
+        >
+      </div>
+      <div ref="verticalRuler" class="vue-ruler-v" @mousedown.stop="verticalDragRuler">
+        <span
+          v-for="(item, index) in yScale"
+          :key="index"
+          :style="{ top: index * 50 + 2 + 'px' }"
+          class="n"
+          >{{ item.id }}</span
+        >
+      </div>
+      <div :style="{ top: verticalDottedTop + 'px' }" class="vue-ruler-ref-dot-h"></div>
+      <div :style="{ left: horizontalDottedLeft + 'px' }" class="vue-ruler-ref-dot-v"></div>
+      <div
+        v-for="item in lineList"
+        :title="item.title"
+        :style="getLineStyle(item)"
+        :key="item.id"
+        :class="`vue-ruler-ref-line-${item.type}`"
+        @mousedown="handleDragLine(item)"
+      ></div>
+    </section>
+    <div ref="content" class="vue-ruler-content" :style="contentStyle">
+      <slot></slot>
+    </div>
+    <div v-show="isDrag" class="vue-ruler-content-mask"></div>
+  </div>
+</template>
+<script setup>
+import { computed, defineComponent, onBeforeUnmount, onMounted, ref } from 'vue'
+
+defineOptions({ name: 'V3RulerComponent' })
+
+const props = defineProps({
+  position: {
+    type: String,
+    default: 'relative',
+    validator: (val) => {
+      return ['absolute', 'fixed', 'relative', 'static', 'inherit'].indexOf(val) !== -1
+    }
+  },
+  // 规定元素的定位类型
+  isHotKey: {
+    type: Boolean,
+    default: true
+  },
+  // 热键开关
+  isScaleRevise: {
+    type: Boolean,
+    default: false
+  },
+  // 刻度修正(根据content进行刻度重置)
+  value: {
+    type: Array,
+    default: () => {
+      return [
+        { type: 'h', site: 50 },
+        { type: 'v', site: 180 }
+      ]
+    }
+  },
+  // 预置参考线
+  contentLayout: {
+    type: Object,
+    default: () => {
+      return { top: 0, left: 0 }
+    }
+  },
+  //步长
+  stepLength: {
+    type: Number,
+    default: 100,
+    validator: (val) => val % 10 === 0
+  }
+})
+
+const emit = defineEmits(['input', 'update:visible'])
+
+/**
+ * @description 绑定事件 on(element, event, handler)
+ */
+const on = (function () {
+  return function (element, event, handler) {
+    if (element && event && handler) {
+      element.addEventListener(event, handler, false)
+    }
+  }
+})()
+
+/**
+ * @description 解绑事件 off(element, event, handler)
+ */
+const off = (function () {
+  return function (element, event, handler) {
+    if (element && event) {
+      element.removeEventListener(event, handler, false)
+    }
+  }
+})()
+const size = 17
+let left_top = 18 // 内容左上填充
+let windowWidth = ref(0) // 窗口宽度
+let windowHeight = ref(0) // 窗口高度
+let xScale = ref([{ id: 0 }]) // 水平刻度
+let yScale = ref([{ id: 0 }]) // 垂直刻度
+let topSpacing = 0 // 标尺与窗口上间距
+let leftSpacing = 0 //  标尺与窗口左间距
+let isDrag = ref(false)
+let dragFlag = '' // 拖动开始标记，可能值x(从水平标尺开始拖动);y(从垂直标尺开始拖动)
+let horizontalDottedLeft = ref(-999) // 水平虚线位置
+let verticalDottedTop = ref(-999) // 垂直虚线位置
+let rulerWidth = 0 // 垂直标尺的宽度
+let rulerHeight = 0 // 水平标尺的高度
+let dragLineId = '' // 被移动线的ID
+//ref
+const content = ref(null)
+const el = ref(null)
+const verticalRuler = ref(null)
+const horizontalRuler = ref(null)
+const wrapperStyle = computed(() => {
+  return {
+    width: windowWidth.value + 'px',
+    height: windowHeight.value + 'px',
+    position: props.position
+  }
+})
+const contentStyle = computed(() => {
+  return {
+    left: props.contentLayout.left + 'px',
+    top: props.contentLayout.top + 'px',
+    padding: left_top + 'px 0px 0px ' + left_top + 'px'
+  }
+})
+const lineList = computed(() => {
+  let hCount = 0
+  let vCount = 0
+  return props.value.map((item) => {
+    const isH = item.type === 'h'
+    return {
+      id: `${item.type}_${isH ? hCount++ : vCount++}`,
+      type: item.type,
+      title: item.site.toFixed(2) + 'px',
+      [isH ? 'top' : 'left']: item.site / (props.stepLength / 50) + size
+    }
+  })
+})
+onMounted(() => {
+  on(document, 'mousemove', dottedLineMove)
+  on(document, 'mouseup', dottedLineUp)
+  init()
+  on(window, 'resize', windowResize)
+})
+onBeforeUnmount(() => {
+  off(document, 'mousemove', dottedLineMove)
+  off(document, 'mouseup', dottedLineUp)
+  off(window, 'resize', windowResize)
+})
+//function
+const init = () => {
+  box()
+  scaleCalc()
+}
+
+const windowResize = () => {
+  xScale.value = [{ id: 0 }]
+  yScale.value = [{ id: 0 }]
+  init()
+}
+const getLineStyle = ({ type, top, left }) => {
+  return type === 'h' ? { top: top + 'px' } : { left: left + 'px' }
+}
+const handleDragLine = ({ type, id }) => {
+  return type === 'h' ? dragHorizontalLine(id) : dragVerticalLine(id)
+}
+//获取窗口宽与高
+const box = () => {
+  setSpacing()
+  if (props.isScaleRevise) {
+    // 根据内容部分进行刻度修正
+    const contentLeft = content.value.offsetLeft
+    const contentTop = content.value.offsetTop
+    getCalcRevise(xScale.value, contentLeft)
+    getCalcRevise(yScale.value, contentTop)
+  }
+  windowWidth.value = document.documentElement.clientWidth - leftSpacing
+  windowHeight.value = document.documentElement.clientHeight - topSpacing - 80
+  rulerWidth = verticalRuler.value.clientWidth
+  rulerHeight = horizontalRuler.value.clientHeight
+}
+const setSpacing = () => {
+  topSpacing = horizontalRuler.value.getBoundingClientRect().y //.offsetParent.offsetTop
+  leftSpacing = verticalRuler.value.getBoundingClientRect().x // .offsetParent.offsetLeft
+}
+// 计算刻度
+const scaleCalc = () => {
+  getCalc(xScale.value, windowWidth.value)
+  getCalc(yScale.value, windowHeight.value)
+}
+
+//获取刻度
+const getCalc = (array, length) => {
+  for (let i = 0; i < (length * props.stepLength) / 50; i += props.stepLength) {
+    if (i % props.stepLength === 0 && i != 0) {
+      array.push({ id: i })
+    }
+  }
+}
+// 获取矫正刻度方法
+const getCalcRevise = (array, length) => {
+  for (let i = 0; i < length; i += 1) {
+    if (i % props.stepLength === 0 && i + props.stepLength <= length) {
+      array.push({ id: i })
+    }
+  }
+}
+//生成一个参考线
+const newLine = (val) => {
+  isDrag.value = true
+  dragFlag = val
+}
+//虚线移动
+const dottedLineMove = ($event) => {
+  setSpacing()
+  switch (dragFlag) {
+    case 'x':
+      if (isDrag.value) {
+        verticalDottedTop.value = $event.pageY - topSpacing
+      }
+      break
+    case 'y':
+      if (isDrag.value) {
+        horizontalDottedLeft.value = $event.pageX - leftSpacing
+      }
+      break
+    case 'h':
+      if (isDrag.value) {
+        verticalDottedTop.value = $event.pageY - topSpacing
+      }
+      break
+    case 'v':
+      if (isDrag.value) {
+        horizontalDottedLeft.value = $event.pageX - leftSpacing
+      }
+      break
+    default:
+      break
+  }
+}
+//虚线松开
+const dottedLineUp = ($event) => {
+  setSpacing()
+  if (isDrag.value) {
+    isDrag.value = false
+    const cloneList = JSON.parse(JSON.stringify(props.value))
+    switch (dragFlag) {
+      case 'x':
+        cloneList.push({
+          type: 'h',
+          site: ($event.pageY - topSpacing - size) * (props.stepLength / 50)
+        })
+        emit('input', cloneList)
+        break
+      case 'y':
+        cloneList.push({
+          type: 'v',
+          site: ($event.pageX - leftSpacing - size) * (props.stepLength / 50)
+        })
+        emit('input', cloneList)
+        break
+      case 'h':
+        dragCalc(cloneList, $event.pageY, topSpacing, rulerHeight, 'h')
+        emit('input', cloneList)
+        break
+      case 'v':
+        dragCalc(cloneList, $event.pageX, leftSpacing, rulerWidth, 'v')
+        emit('input', cloneList)
+        break
+      default:
+        break
+    }
+    verticalDottedTop.value = horizontalDottedLeft.value = 0
+  }
+}
+const dragCalc = (list, page, spacing, ruler, type) => {
+  if (page - spacing < ruler) {
+    let Index
+    lineList.value.forEach((item, index) => {
+      if (item.id === dragLineId) {
+        Index = index
+      }
+    })
+    list.splice(Index, 1, {
+      type: type,
+      site: -600
+    })
+  } else {
+    let Index
+    lineList.value.forEach((item, index) => {
+      if (item.id === dragLineId) {
+        Index = index
+      }
+    })
+    list.splice(Index, 1, {
+      type: type,
+      site: (page - spacing - size) * (props.stepLength / 50)
+    })
+  }
+}
+//水平标尺按下鼠标
+const horizontalDragRuler = () => {
+  newLine('x')
+}
+//垂直标尺按下鼠标
+const verticalDragRuler = () => {
+  newLine('y')
+}
+// 水平线处按下鼠标
+const dragHorizontalLine = (id) => {
+  isDrag.value = true
+  dragFlag = 'h'
+  dragLineId = id
+}
+// 垂直线处按下鼠标
+const dragVerticalLine = (id) => {
+  isDrag.value = true
+  dragFlag = 'v'
+  dragLineId = id
+}
+</script>
+<style lang="scss">
+.vue-ruler-wrapper {
+  left: 0;
+  top: 0;
+  z-index: 9;
+  user-select: none;
+}
+
+.vue-ruler-h,
+.vue-ruler-v,
+.vue-ruler-ref-line-v,
+.vue-ruler-ref-line-h,
+.vue-ruler-ref-dot-h,
+.vue-ruler-ref-dot-v {
+  position: absolute;
+  left: 0;
+  top: 0;
+  overflow: hidden;
+  z-index: 999;
+}
+
+.vue-ruler-h {
+  width: calc(100% - 18px);
+  background-color: #333;
+  height: 18px;
+  left: 18px;
+  opacity: 0.6;
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAASCAMAAAAuTX21AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAlQTFRFMzMzAAAA////BqjYlAAAACNJREFUeNpiYCAdMDKRCka1jGoBA2JZZGshiaCXFpIBQIABAAplBkCmQpujAAAAAElFTkSuQmCC)
+    repeat-x;
+}
+
+.vue-ruler-v {
+  width: 18px;
+  height: 85vh;
+  top: 18px;
+  opacity: 0.6;
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAyCAMAAABmvHtTAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAlQTFRFMzMzAAAA////BqjYlAAAACBJREFUeNpiYGBEBwwMTGiAakI0NX7U9aOuHyGuBwgwAH6bBkAR6jkzAAAAAElFTkSuQmCC)
+    repeat-y;
+  /*./image/ruler_v.png*/
+}
+
+.vue-ruler-v .n,
+.vue-ruler-h .n {
+  position: absolute;
+  font:
+    10px/1 Arial,
+    sans-serif;
+  color: #333;
+  cursor: default;
+  top: 1px;
+}
+
+.vue-ruler-v .n {
+  width: 8px;
+  left: 3px;
+  word-wrap: break-word;
+}
+
+.vue-ruler-ref-line-v,
+.vue-ruler-ref-line-h,
+.vue-ruler-ref-dot-h,
+.vue-ruler-ref-dot-v {
+  z-index: 998;
+}
+
+.vue-ruler-ref-line-h {
+  width: 100%;
+  height: 3px;
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAABCAMAAADU3h9xAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFSv//AAAAH8VRuAAAAA5JREFUeNpiYIACgAADAAAJAAE0lmO3AAAAAElFTkSuQmCC)
+    repeat-x left center;
+  /*./image/line_h.png*/
+  cursor: n-resize;
+  /*url(./image/cur_move_h.cur), move*/
+}
+
+.vue-ruler-ref-line-v {
+  width: 3px;
+  height: 100%;
+  _height: 9999px;
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAICAMAAAAPxGVzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFSv//AAAAH8VRuAAAAA5JREFUeNpiYEAFAAEGAAAQAAGePof9AAAAAElFTkSuQmCC)
+    repeat-y center top;
+  /*./image/line_v.png*/
+  cursor: w-resize;
+  /*url(./image/cur_move_v.cur), move*/
+}
+
+.vue-ruler-ref-dot-h {
+  width: 100%;
+  height: 3px;
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAMAAABFaP0WAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFf39/////F3PnHQAAAAJ0Uk5T/wDltzBKAAAAEElEQVR42mJgYGRgZAQIMAAADQAExkizYQAAAABJRU5ErkJggg==)
+    repeat-x left 1px;
+  /*./image/line_dot.png*/
+  cursor: n-resize;
+  /*url(./image/cur_move_h.cur), move*/
+  top: -10px;
+}
+
+.vue-ruler-ref-dot-v {
+  width: 3px;
+  height: 100%;
+  _height: 9999px;
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAMAAABFaP0WAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFf39/////F3PnHQAAAAJ0Uk5T/wDltzBKAAAAEElEQVR42mJgYGRgZAQIMAAADQAExkizYQAAAABJRU5ErkJggg==)
+    repeat-y 1px top;
+  /*./image/line_dot.png*/
+  cursor: w-resize;
+  /*url(./image/cur_move_v.cur), move*/
+  left: -10px;
+}
+
+.vue-ruler-content {
+  position: absolute;
+  z-index: 997;
+  width: 100%;
+  height: 100%;
+}
+
+.vue-ruler-content-mask {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  z-index: 998;
+}
+</style>

src/views/mapPage/realTimeMap/editMap.vue

@@ -540,6 +540,7 @@ import lineLibrarySettingDialog from './components-tool/lineLibrarySettingDialog
 import layerSelectionToolDialog from './components-tool/layerSelectionToolDialog.vue'
 import itemAreaManagementDialog from './components-tool/itemAreaManagementDialog.vue'
 import lineLibraryManagementDialog from './components-tool/lineLibraryManagementDialog.vue'
+import mapScaleTool from './components-tool/map-scale-tool.vue'
 
 import * as MapApi from '@/api/map/map'
 import cursorCollection from './cursorCollection'
@@ -565,18 +566,43 @@ const allMapPointInfo = ref([]) //所有的图标的列表
 
 // 缩放停止
 const interfaceRefreshed = ref(true)
-const resizeEnd = (x, y, w, h, item, index) => {
+const resizeEnd = (locationX, locationY, w, h, item, index) => {
   interfaceRefreshed.value = false
   nextTick(() => {
+    let x = Number(locationX) + Number(item.locationWide) / 2
+    let y = Number(locationY) + Number(item.locationDeep) / 2
+
     allMapPointInfo.value[index].locationX = x
     allMapPointInfo.value[index].locationY = y
     allMapPointInfo.value[index].locationWide = w
     allMapPointInfo.value[index].locationDeep = h
     addEditHistory()
+
+    state.mapRouteList.forEach((route) => {
+      if (item.id === route.startingPointId) {
+        route.startPointX = x
+        route.startPointY = y
+        route.beginHigh = item.locationDeep ? Number(item.locationDeep) : 5
+        route.beginWidth = item.locationWide ? Number(item.locationWide) : 5
+        route.actualStartPointX = actualPoint.actualLocationX
+        route.actualStartPointY = actualPoint.actualLocationY
+      }
+      if (item.id === route.endPointId) {
+        route.endPointX = x
+        route.endPointY = y
+        route.endHigh = item.locationDeep ? Number(item.locationDeep) : 5
+        route.endWidth = item.locationWide ? Number(item.locationWide) : 5
+        route.actualEndPointX = actualPoint.actualLocationX
+        route.actualEndPointY = actualPoint.actualLocationY
+      }
+    })
   })
 }
 // 拖拽停止
-const dragEnd = (x, y, item, index) => {
+const dragEnd = (locationX, locationY, item, index) => {
+  let x = Number(locationX) + Number(item.locationWide) / 2
+  let y = Number(locationY) + Number(item.locationDeep) / 2
+
   if (x === item.locationX && y === item.locationY) return
   let actualPoint = disposeEventPoint(x, y)
   allMapPointInfo.value[index].locationX = x
@@ -1848,6 +1874,7 @@ document.onmousedown = function (e) {
     currentItemIndex.value = -1
   }
 }
+
 // 阻止默认菜单弹出
 window.document.oncontextmenu = function () {
   return false
@@ -1863,8 +1890,7 @@ onMounted(() => {
   position: relative;
   width: 100%;
   overflow: auto;
-  border: 1px solid #ccc;
+  // height: 85vh;
-  // height: 80vh;
   .map-bg {
     background-size: contain;
     background-repeat: no-repeat;
@@ -1878,17 +1904,13 @@ onMounted(() => {
 }
 
 .top-tool {
+  margin-top: 5px;
   .top-tool-list {
     display: flex;
     align-items: center;
     text-align: center;
     background-color: #fff;
-    margin-top: -15px;
-    margin-left: -20px;
-    margin-right: -20px;
     padding: 0 12px;
-    margin-bottom: 20px;
-    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
     height: 70px;
 
     .top-tool-item {
@@ -1897,7 +1919,7 @@ onMounted(() => {
 
       .tool-item {
         cursor: pointer;
-        width: 49px;
+        width: 50px;
         height: 70px;
         display: flex;
         flex-direction: column;
@@ -1915,6 +1937,7 @@ onMounted(() => {
           line-height: 20px;
           text-align: center;
           font-style: normal;
+          margin-top: 4px;
         }
       }
       .line {