仓管平面图（自定义布局）

已于 2023-03-20 17:47:22 修改
阅读量1.6k 收藏 8
点赞数 3
文章标签： vue.js Powered by 金山文档
于 2023-03-20 17:46:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46166771/article/details/129672266
版权

不理解的请备注

效果图：

视频不太清楚

1、安装vue-grid-layout

npm install vue-grid-layout --save

2、安装splitPane

npm install vue - splitpane --save

3、代码块分布

4、PositionsList代码

<!-- 文件管理 -->
<template>
  <a-card>
    <a-row type="flex" justify="center">
      <a-col :span="3" :order="1">
        <a-form-item label="长:" :labelCol="{ span: 7 }" :wrapperCol="{ span: 17 }">
          <span
            ><a-input type="number" @change="getLong" :disabled="disabled" v-model="form.longs" placeholder="请输入"
          /></span>
        </a-form-item>
      </a-col>
      <a-col :span="3" :order="2">
        <a-form-item label="宽:" :labelCol="{ span: 7 }" :wrapperCol="{ span: 17 }">
          <span
            ><a-input type="number" :disabled="disabled" @change="getLong" v-model="form.wides" placeholder="请输入"
          /></span>
        </a-form-item>
      </a-col>
      <a-col :span="3" :order="2">
        <a-form-item label="高:" :labelCol="{ span: 7 }" :wrapperCol="{ span: 17 }">
          <span><a-input type="number" @change="getLong" v-model="form.heigts" placeholder="请输入"/></span>
        </a-form-item>
      </a-col>
      <a-col :span="3" :order="4">
        <a-form-item label="层数:" :labelCol="{ span: 7 }" :wrapperCol="{ span: 17 }">
          <span><a-input placeholder="请输入"/></span>
        </a-form-item>
      </a-col>
      <a-col :span="3" :order="5">
        <a-form-item label="行数:" :labelCol="{ span: 7 }" :wrapperCol="{ span: 17 }">
          <span><a-input placeholder="请输入"/></span>
        </a-form-item>
      </a-col>
      <a-col :span="4" :order="6">
        <a-form-item label="缩放大小:" :labelCol="{ span: 7 }" :wrapperCol="{ span: 17 }" class="flexble">
          <a-slider id="test" v-model="scaleRadios" :default-value="scaleRadios" @change="getZoom" />
        </a-form-item>
      </a-col>
      <a-col :span="4" :order="7" style="margin-left:30px">
        <a-space style="margin-top:5px">
          <a-button type="primary" @click="generate" v-if="!disabled" :disabled="disabled">生成仓位图</a-button>
          <a-button type="primary" @click="getreset" v-else>重置</a-button>
          <a-button type="primary">生成区位图</a-button>
        </a-space>
      </a-col>
    </a-row>
    <!-- 仓位图 -->
    <positchart ref="positForm" :scaleRadio="scaleRadio" :round="form" />
  </a-card>
</template>

<script>
import positchart from '@views/erp/housing/modules/positchart'
export default {
  components: {
    positchart
  },
  name: 'PositionsList',
  data() {
    return {
      form: {
        long: 13,
        longs: 13,
        wide: 10,
        wides: 10,
        heigt: 50,
        heigts: 50
      },
      disabled: false,
      scaleRadios: 100,
      scaleRadio: 1
    }
  },
  methods: {
    generate() {
      let that = this
      that.disabled = true
      that.$refs.positForm.handl()
    },
    getLong() {
      this.form.long = this.form.longs - 0
      this.form.wide = this.form.wides - 0
      this.form.heigt = this.form.heigts - 0
    },
    getreset() {
      let that = this
      that.disabled = false
      that.form = {
        long: 13,
        longs: 13,
        wide: 10,
        wides: 10,
        heigt: 50,
        heigts: 50
      }
      that.$refs.positForm.handfe()
    },
    getZoom() {
      this.scaleRadio = this.scaleRadios / 100 - 0
    }
  }
}
</script>
<style></style>

6、positchart代码块

<template>
  <div v-if="layeshow" class="box">
    <splitPane
      :max-percent="100"
      :default-percent="defaultPercentOne"
      :min-percent="11"
      split="vertical"
      class="splitpanes__pane"
      style="height: 650px;"
    >
      <template slot="paneL">
        <!-- <button @click="fullScreenAndExit()">全屏和退出</button> -->
        <lb-card title="操作区" size="default" style="padding:0px;margin:0px;height:650px;">
          <div @drag="drag" @dragend="dragend('operate')" class="operate" draggable="true" unselectable="on">
            操作
          </div>
          <div @drag="drag" @dragend="dragend('workbench')" class="workbench" draggable="true" unselectable="on">
            工作台
          </div>
          <div @drag="drag" @dragend="dragend('Shelves')" class="Shelves" draggable="true" unselectable="on">
            货架
          </div>
          <div @drag="drag" @dragend="dragend('passage')" class="passage" draggable="true" unselectable="on">
            通道
          </div>
        </lb-card>
      </template>
      <template slot="paneR">
        <div class="penclass">
          <a-icon type="bug" style="color:#fff;font-size: 10px;" />
        </div>
        <split-pane :max-percent="100" :default-percent="defaultPercentwe" :min-percent="10" split="vertical">
          <template slot="paneL">
            <lb-card title="显示区" size="default" style="padding:0px;margin:0px;height: 650px;">
              <div id="content" class="layoutBox" :style="`zoom:${scaleRadio ? scaleRadio : 1}`">
                <grid-layout
                  ref="gridlayout"
                  :layout.sync="layout"
                  :col-num="round.long"
                  :row-height="round.heigt"
                  :responsive="false"
                  :vertical-compact="false"
                  :prevent-collision="true"
                  :use-css-transforms="true"
                  :is-draggable="true"
                  :is-resizable="true"
                  class="grid_cals"
                >
                  <!-- 背景框 -->
                  <myGridItemPreview :itemData="backgroundData" />
                  <grid-item
                    :key="item.i"
                    v-for="item in layout"
                    :x="item.x"
                    :y="item.y"
                    :w="item.w"
                    :h="item.h"
                    :i="item.i"
                    :style="{ background: getColor(item.text) }"
                  >
                    <div class="clmodule" @click="getEdit(item)">
                      <span>{{ item.text }}</span>
                    </div>
                  </grid-item>
                </grid-layout>
              </div>
            </lb-card>
          </template>
          <template slot="paneR">
            <div class="penclass">
              <a-icon type="bug" style="color:#fff;font-size: 10px;" />
            </div>
            <div style="margin-top: -5px;">
              <a-tabs type="card" @change="callback" size="small">
                <a-tab-pane v-for="item in tabPane" :key="item.key" :tab="item.title">
                  <positdation ref="dationForm" :jectDation="jectDation" v-if="showpane == 1" />
                  <positgoods v-if="showpane == 2" />
                  <positshelves v-if="showpane == 3" />
                </a-tab-pane>
              </a-tabs>
            </div>
          </template>
        </split-pane>
      </template>
    </splitPane>
  </div>
</template>
<script>
import VueDragResize from 'vue-drag-resize'
import { GridLayout, GridItem } from 'vue-grid-layout'
import splitPane from 'vue-splitpane'
import LbCard from '@views/Acom/LbCard'
// 基础信息
import positdation from '@views/erp/housing/modals/positdation'
// 货品
import positgoods from '@views/erp/housing/modals/positgoods'
// 货架信息
import positshelves from '@views/erp/housing/modals/positshelves'
import uuid from 'uuid'
let mouseXY = { x: null, y: null }
let DragPos = { x: null, y: null, w: 1, h: 1, i: null }
import myGridItemPreview from '@views/erp/housing/modules/itemPreview'
export default {
  components: {
    GridLayout,
    GridItem,
    myGridItemPreview,
    splitPane,
    LbCard,
    positgoods,
    VueDragResize,
    positdation,
    positshelves
  },
  props: {
    round: {
      type: Object,
      required: true
    },
    scaleRadio: {
      type: Number
    }
  },
  data() {
    return {
      // tabs
      jectDation: {},
      tabPane: [
        {
          title: '基础信息',
          key: 1
        },
        {
          title: '货品信息',
          key: 2
        },
        {
          title: '货架详情',
          key: 3
        }
      ],
      showpane: 0,
      layout: [
        {
          x: 0,
          y: 0,
          w: 1,
          h: 2,
          i: '0',
          id: '0',
          text: '货架',
          name: '0-001',
          warehouse: '1层',
          client: '云数联客户',
          type: '货架',
          attribute: '塔型货架',
          MaxLength: 2,
          width: 1
        }
      ],
      backgroundData: [],
      defaultPercentOne: 11,
      layeshow: false,
      defaultPercentwe: 80
    }
  },
  beforeCreate() {
    // 屏幕高度
    this.screenHeight = document.documentElement.clientHeight
  },
  mounted() {
    document.addEventListener(
      'dragover',
      function(e) {
        mouseXY.x = e.clientX
        mouseXY.y = e.clientY
      },
      false
    )
  },
  beforeDestroy() {},
  methods: {
    // tabs
    callback(key) {
      let that = this
      that.showpane = key
    },
    // 显示
    handl() {
      let that = this
      this.initPreviewData()
      that.layeshow = true
      console.log(this.round)
    },
    // 隐藏
    handfe() {
      let that = this
      that.layeshow = false
    },
    initPreviewData() {
      this.backgroundData = []
      for (let i = 0; i < this.round.long; i++) {
        for (let j = 0; j < this.round.wide; j++) {
          this.backgroundData.push({
            x: i,
            y: j,
            w: 1,
            h: 1,
            i: uuid // 防止 key 重复
          })
        }
      }
    },
    getEdit(item) {
      console.log(item)
      let that = this
      that.showpane = 1
      that.jectDation = item
    },
    drag(e) {
      let parentRect = document.getElementById('content').getBoundingClientRect()
      let mouseInGrid = false
      if (
        mouseXY.x > parentRect.left &&
        mouseXY.x < parentRect.right &&
        mouseXY.y > parentRect.top &&
        mouseXY.y < parentRect.bottom
      ) {
        mouseInGrid = true
      }
      if (mouseInGrid === true && this.layout.findIndex(item => item.i === 'drop') === -1) {
        this.layout.push({
          x: (this.layout.length * 2) % (this.colNum || this.round.long),
          y: this.layout.length + (this.colNum || this.round.long), // puts it at the bottom
          w: 1,
          h: 1,
          i: 'drop'
        })
      }
      let index = this.layout.findIndex(item => item.i === 'drop')
      if (index !== -1) {
        try {
          // this.$refs.gridlayout.$children[this.layout.length].$refs.item.style.display = 'none'
        } catch {}
        let el = this.$refs.gridlayout.$children[index]
        el.dragging = { top: mouseXY.y - parentRect.top, left: mouseXY.x - parentRect.left }
        let new_pos = el.calcXY(mouseXY.y - parentRect.top, mouseXY.x - parentRect.left)
        if (mouseInGrid === true) {
          this.$refs.gridlayout.dragEvent('dragstart', 'drop', new_pos.x, new_pos.y, 1, 1)
          DragPos.i = String(index)
          DragPos.x = this.layout[index].x
          DragPos.y = this.layout[index].y
        }
        if (mouseInGrid === false) {
          this.$refs.gridlayout.dragEvent('dragend', 'drop', new_pos.x, new_pos.y, 1, 1)
          this.layout = this.layout.filter(obj => obj.i !== 'drop')
        }
      }
    },
    dragend(text) {
      let obj = {}
      if (text == 'operate') {
        obj.text = '操作'
        obj.h = 1
      }
      if (text == 'workbench') {
        obj.text = '工作台'
        obj.h = 1
      }
      if (text == 'Shelves') {
        obj.text = '货架'
        obj.h = 2
      }
      if (text == 'passage') {
        obj.text = '通道'
        obj.h = 3
      }
      let parentRect = document.getElementById('content').getBoundingClientRect()
      let mouseInGrid = false
      if (
        mouseXY.x > parentRect.left &&
        mouseXY.x < parentRect.right &&
        mouseXY.y > parentRect.top &&
        mouseXY.y < parentRect.bottom
      ) {
        mouseInGrid = true
      }
      if (mouseInGrid === true) {
        this.layout = this.layout.filter(obj => obj.i !== 'drop')
        this.layout.push({
          x: DragPos.x,
          y: DragPos.y,
          w: 1,
          h: obj.h,
          i: DragPos.i,
          moved: true,
          text: obj.text,
          type: obj.text,
          name: obj.h + DragPos.i,
          id: '0-' + obj.h + DragPos.i,
          warehouse: '1层',
          client: '云数联客户',
          attribute: '塔型货架',
          MaxLength: obj.h,
          width: 1
        })
        console.log(this.layout)
        try {
          this.$refs.gridLayout.$children[this.layout.length].$refs.item.style.display = 'block'
        } catch {}
      }
    },
    closeItemHandle(item) {
      // 预览与正式数据公用一个 item 因此，需两者都清除数据
      this.layout.splice(this.layout.findIndex(i => i.i == item.i))
      this.backgroundData.splice(this.backgroundData.findIndex(i => i.i == item.i))
    },
    // 颜色
    getColor(text) {
      let color = ''
      if (text == '操作') color = 'green'
      if (text == '工作台') color = 'red'
      if (text == '货架') color = 'blue'
      if (text == '通道') color = 'orange'
      return color
    },
    // 全屏
    // 点击事件
    fullScreenAndExit() {
      const el = document.querySelector('.box')
      this.toggleFullScreen(el)
    },
    /**
     * 切换全屏
     * @param {HTMLElement} element dom元素
     */
    toggleFullScreen(element) {
      if (!this.isFullScreen) {
        this.fullScreen(element)
      } else {
        this.exitFullScreen()
      }
      this.isFullScreen = !this.isFullScreen
    },
    /**
     * 全屏
     * @param {HTMLElement} element dom元素
     */
    fullScreen(element) {
      const requestMethod =
        element.requestFullScreen ||
        element.webkitRequestFullScreen ||
        element.mozRequestFullScreen ||
        element.msRequestFullScreen

      if (requestMethod) {
        requestMethod.call(element)
      }
      if (typeof window.ActiveXObject !== 'undefined') {
        let wscript = new ActiveXObject('WScript.Shell')
        if (wscript !== null) {
          wscript.SendKeys('{F11}')
        }
      }
    },
    /**
     * 退出全屏
     */
    exitFullScreen() {
      const documentElement = document
      const cfs =
        documentElement.cancelFullScreen ||
        documentElement.webkitCancelFullScreen ||
        documentElement.mozCancelFullScreen ||
        documentElement.exitFullScreen

      if (cfs) {
        cfs.call(documentElement)
      } else if (typeof window.ActiveXObject !== 'undefined') {
        // for IE，这里和fullScreen相同，模拟按下F11键退出全屏
        const wscript = new ActiveXObject('WScript.Shell')
        if (wscript != null) {
          wscript.SendKeys('{F11}')
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.penclass {
  position: absolute;
  background: blue;
  top: 40%;
  left: -5px;
  width: 10px;
  height: 45px;
  display: flex;
  justify-content: center;
  align-self: center;
  align-items: center;
  border-radius: 10px;
}
// 操作区
.operate {
  height: 60px;
  background: green;
  margin: 10px 0;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}
// 货架版
.Shelves {
  height: 120px;
  background: blue;
  margin: 10px 0;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}
// 工作台
.workbench {
  height: 60px;
  background: red;
  margin: 10px 0;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}
// 通道版
.passage {
  height: 180px;
  background: orange;
  margin: 10px 0;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}
.clmodule {
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  height: 100%;
  color: #fff;
}
.vue-grid-item .no-drag {
  height: 100%;
  width: 100%;
}
.vue-grid-item .minMax {
  font-size: 12px;
}
.vue-grid-item .add {
  cursor: pointer;
}

.layoutBox {
  width: 100%;
  height: 100%;
}
// .grid_cals {
//   width: 100%;
//   overflow-x: auto;
//   display: -webkit-box;
//   -webkit-overflow-scrolling: touch;
//   min-height: 600px;
// }
// .grid_cals::-webkit-scrollbar {
//   display: none;
// }
</style>

7、itemPreview代码块

<template>
  <div>
    <grid-item
      v-for="item in itemData"
      :x="item.x"
      :y="item.y"
      :w="item.w"
      :h="item.h"
      :i="item.i"
      :key="item.i"
      :is-draggable="false"
      :is-resizable="false"
      class="grid-item"
    />
  </div>
</template>

<script>
import { GridItem } from 'vue-grid-layout'
export default {
  name: 'VueLayoutItem',

  props: ['itemData'],

  components: { GridItem }
}
</script>

<style lang="less" scoped>
.grid-item {
  // border-top: 2px solid rgba(1, 153, 209, 0.5);
  border: #999 dashed 1px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}
</style>

8、positdation代码块

<!-- 基础信息 -->
<template>
  <div>
    <span v-if="Object.keys(parent).length == 0">
      <a-empty
        image="https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original"
      />
    </span>
    <a-row v-else>
      <a-col :span="24">
        <a-form-model-item label="库位编号:" :labelCol="{ span: 6 }" :wrapperCol="{ span: 15 }">
          <a-input placeholder="" v-model="parent.name" />
        </a-form-model-item>
      </a-col>
      <a-col :span="24">
        <a-form-model-item label="所在仓库:" :labelCol="{ span: 6 }" :wrapperCol="{ span: 15 }">
          <a-input placeholder="" v-model="parent.warehouse" />
        </a-form-model-item>
      </a-col>
      <a-col :span="24">
        <a-form-model-item label="所属客户:" :labelCol="{ span: 6 }" :wrapperCol="{ span: 15 }">
          <a-input placeholder="" v-model="parent.client" />
        </a-form-model-item>
      </a-col>
      <a-col :span="24">
        <a-form-model-item label="库位类型:" :labelCol="{ span: 6 }" :wrapperCol="{ span: 15 }">
          <a-input placeholder="" v-model="parent.type" />
        </a-form-model-item>
      </a-col>
      <a-col :span="24">
        <a-form-model-item label="库位属性:" :labelCol="{ span: 6 }" :wrapperCol="{ span: 15 }">
          <a-input placeholder="" v-model="parent.attribute" />
        </a-form-model-item>
      </a-col>
      <a-col :span="24">
        <a-form-model-item label="最大长度:" :labelCol="{ span: 6 }" :wrapperCol="{ span: 15 }">
          <a-input placeholder="" v-model="parent.MaxLength" />
        </a-form-model-item>
      </a-col>
      <a-col :span="24">
        <a-form-model-item label="最大宽度:" :labelCol="{ span: 6 }" :wrapperCol="{ span: 15 }">
          <a-input placeholder="" v-model="parent.width" />
        </a-form-model-item>
      </a-col>
      <a-col :span="12" style="margin-top: 50px;">
        <span style="display: flex;justify-content: center;"><a-button type="primary">修改</a-button></span>
      </a-col>
      <a-col :span="12" style="margin-top: 50px;">
        <span style="display: flex;justify-content: center;"><a-button type="primary">确定</a-button></span>
      </a-col>
    </a-row>
  </div>
</template>
<script>
export default {
  name: 'positdation',
  data() {
    return {
      parent: {}
    }
  },
  props: {
    jectDation: {
      type: Object,
      required: true
    }
  },
  watch: {
    jectDation: {
      immediate: true,
      handler(val) {
        let that = this
        that.parent = val
      }
    }
  },
  methods: {
    // 传递过来的参数
    getDation(item) {
      let that = this
      that.parent = {}
      that.parent = item
    }
  }
}
</script>
<style lang="less" scoped></style>

9、positgoods和positshelves为空文件

My&Liu
关注
  • 3
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
vue.js + leaflet.js + 商城各楼层平面地图展示
05-30
基于 vue + leaflet 的 商城楼层平面图展示 ，商城内部个区域分割且实现点击，支持自定义GeoJSON 文件 ，适用于有一定前端基础的人员。
仓库平面图
09-11
仓库平面图
仓库信息管理系统
jeff的博客
06-17 606
文件引入 我的做法不是cdn（内容分发网）引入，是下载了直接引用的。 直接下载了样式index.css和组件库index.js，另外引入vue的vue.js 注意：vue的引入必须在element-ui之前，即vue.js在index.js前面，因为element-ui是基于vue书写的。 这是我写的一个jsp页面,里面直接引用这些文件 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="
【vue+leaflet】vue项目中使用leaflet绘制室内平面图、leaflet.pm在平面图中绘制点、线、面图层(一)
最新发布
$
02-19 2970
到这里就可以实现效果图所展示的功能了,下节详细说明各个模块及事件函数的功能.因为我是单个页面需要所有就局部引入了,也可以放全局里面引入。所有示例代码已上传,
可拖拽分隔面板-- vue-splitpane
u_ndefine_d的博客
01-02 906
使用vue-splitpane插件分割页面窗口
vue中使用antv/g6 绘制关系图、结构图_高级图标绘制设计软件最新版 | MyDraw 4.1.2...
weixin_39631350的博客
10-26 1080
THE START更新高级图标绘制设计软件最新版，MyDraw 4.1.2。还有一些类似的软件Xmind、Xmind ZEN等，都可在小编的菜单栏找到。进入主题！MyDraw是先进的绘图软件和矢量图形绘图工具。使用此程序创建流程图，组织结构图，思维导图，网络图，平面图，UML图和常规业务图。MyDraw程序包含强大的功能，可帮助您处理流程图，组织结构图，思维导图，网络图，平面图，一般业务...
vue 使用leaflet绘制平面图（二）
沐游虞的博客
12-15 5662
vue 使用leaflet绘制平面图
vue实现平面图标记点位可拖拽可删除（可自定义标记图标）
学习记录
12-16 3821
vue实现标记点位可拖拽可删除
前端vue+elementui仓库管理系统java(springboot+ssm)/python/php/nodejs/
qq840612233的博客
05-02 283
对原有数据进行修改；客户管理及供应商管理等功能仓库的管理的操作自动化和信息的电子化，全面提高了仓库的管理水平。随着我国改革开放的不断深入，经济飞速的发展，企业要想生存、发展，要想在激烈的市场竞争中立于不败之地，没有现代化的管理是万万不行的，仓库管理的全面自动化、信息化则是其中极其重要的部分。通过对仓库管理日常工作的详细调查，搜集了大量的资料，从系统结构的组织，功能的实现，技术的要求以及可行性等多方面进行考虑，认为本课题是一个适应现今仓库管理需求的计算机信息管理系统，具有一定的实际，开发价值和使用价值。
Vuex(仓库)超详细解析+配图
m0_73783485的博客
08-15 341
Vuex是干什么的？？Vuex的作用是什么？？？Vuex怎么去使用？？？？一篇解决所有！！配图文讲解
VUE：使用canvas绘制管线/管廊（一）
qq_37070696的博客
04-19 998
vue使用canvas绘制管线/管廊 canvas实时绘制 canvas绘制图形、文字、图片 构造函数的运用
基于Vue3+Vite的商品管理系统可视化页面源码.zip
08-21
【资源说明】 基于Vue3+Vite的商品管理系统可视化页面源码.zip 1、该资源内项目代码都是经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载使用，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能。 欢迎下载，欢迎交流，互相学习进步！ 基于Vue3+Vite的商品管理系统可视化页面源码.zip基于Vue3+Vite的商品管理系统可视化页面源码.zip基于Vue3+Vite的商品管理系统可视化页面源码.zip基于Vue3+Vite的商品管理系统可视化页面源码.zip基于Vue3+Vite的商品管理系统可视化页面源码.zip
毕业设计新作品-采用Vue3全家桶开发的仓储物流管理系统源码+使用说明.zip
10-26
【资源说明】 毕业设计新作品-采用Vue3全家桶开发的仓储物流管理系统源码+使用说明.zip 采用 vue3 全家桶（vite+pinia+element-plus+vue-router@4） 查看[更新日志](./CHANGELOG.md) ## 使用方式 ### install ``` pnpm install ``` ### run ``` pnpm run dev ``` ### build ``` pnpm run build:prod ``` 【备注】 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载使用，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可直接用于毕设、课设、作业等。 欢迎下载，沟通交流，互相学习，共同进步！
仓管系统流程图
06-06
仓管系统流程图
仓库管理 易达仓管王 v8000
11-12
易达仓管王，功能强大、操作简单。支持批号批次、货位管理的仓库管理软件。易达仓库管王软件功能简要说明：一、基础资料1、往来单位 可以添加，修改，删除往来单位，有往来单
仓管个人简历表格模板
07-24
仓管个人简历表格模板适用于岗位求职使用。本作品提供DOC格式文件可免费下载
仓管员简历模板免费下载
07-31
仓管员简历模板免费下载适用于岗位求职使用。本作品提供DOC格式文件可免费下载
基于vue-grid-layout的自定义布局桌面
Super Livia
08-26 2479
重要：vue-grid-layout拖拽自定义桌面demo演示 项目跑起来会遇到一个错误，把文件名改一下就可以跑起来了,如下图所示：
vue学习--浏览器渲染引擎、html重绘和重排
AngelQ
09-10 1202
html优化 与重点概念 ##浏览器的运行机制 1、构建DOM树（parse）,渲染引擎解析HTML文档，首先将标签转换成DOM树中的DOM node(包括js生成的标签)生成内容树（content Tree/DOM Tree）; 2、构建渲染树（construct）:解析对应的css样式文件信息（包括js生成的样式和外部css文件），而这些文件信息以及HTML中可见的指令（如<b></b>），构建渲染树（rendering Tree/Frame Tree）;render tr
html仓管信息页面
12-25
HTML仓管信息页面是一个用HTML语言设计并开发的用于展示仓库管理信息的网页。这个页面通常包括仓库的基本信息，货物的存储情况，以及仓库管理的相关数据。 在HTML仓管信息页面中，会有仓库的名称、地址、联系方式等基本信息的展示。此外，还会有货物的存储情况，比如各个货架上存放的货物种类、数量和存放位置。还会有货物入库和出库的记录，以及货物的存储状态，比如过期的货物或者需要报废的货物。 在仓管信息页面中，还可能会包括一些图表或统计数据，用于展示货物的存储状况或者仓库的运营情况。这些数据可以帮助仓库管理员进行更好的管理货物和仓库。 此外，HTML仓管信息页面还可以包括一些功能按钮或者链接，用于方便仓库管理员进行一些操作，比如录入货物信息、查询货物存储情况、或者进行货物的调配等操作。 总之，HTML仓管信息页面是一个用于展示和管理仓库信息的网页，可以帮助仓库管理员更好地进行货物的管理和仓库的运营。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

My&Liu

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值