luoshiwen
/
Storehouse
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

代码提交

This commit is contained in:
luoshiwen 2023-04-10 18:05:02 +08:00
parent 16d49f37bb
commit f10c84a217
5 changed files with 405 additions and 292 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/api/index.js
View File

@ -19,41 +19,41 @@ export const byPosition = (params) => {
}
// 获取物料和批次
export const byBatchAndMateri = (params) => {
axios.get('api/visualStorage/getVisualStorageListByBatchAndMateri', {
return axios.get('api/visualStorage/getVisualStorageListByBatchAndMateriel', {
params
})
}
// 仓库使用率
export const getWarehouseUsages = (params) => {
axios.get('api/visualStorage/getWarehouseUsages', {
return axios.get('api/visualStorage/getWarehouseUsages', {
params
})
}
// 每月的周转率
export const getTurnoverRate = (params) => {
axios.get('api/visualStorage/getTurnoverRateList', {
return axios.get('api/visualStorage/getTurnoverRateList', {
params
})
}
// 当月出入库金额
export const getChangeAmount = (params) => {
axios.get('api/visualStorage/getChangeAmount', {
return axios.get('api/visualStorage/getChangeAmount', {
params
})
}
// 积压物质
export const getBacklogMaterialInfo = (params) => {
axios.get('api/visualStorage/getBacklogMaterialInfo', {
return axios.get('api/visualStorage/getBacklogMaterialInfo', {
params
})
}
// 库龄结构
export const getInventoryAgeInfo = (params) => {
axios.get('api/visualStorage/getInventoryAgeInfo', {
return axios.get('api/visualStorage/getInventoryAgeInfo', {
params
})
}
@ -61,14 +61,14 @@ export const getInventoryAgeInfo = (params) => {
// 库存构成
export const getStore = (params) => {
axios.get('api/visualStorage/getInventoryConstitute', {
return axios.get('api/visualStorage/getInventoryConstitute', {
params
})
}
// 库容预测
export const getMaterialDataList = (params) => {
axios.get('api/visualStorage/getMaterialDataList', {
return axios.get('api/visualStorage/getMaterialDataList', {
params
})
}

66
src/component/OverView.vue
View File

@ -8,7 +8,7 @@
<!-- 每月周转率 -->
<div class="monthlyTurnover">
<div class="title">
每日周转率
每月周转率
</div>
<div class="turnoverChart" ref="turnoverChart">
@ -36,6 +36,7 @@
</div>
</template>
<script>
import { getWarehouseUsages, getTurnoverRate, getBacklogMaterialInfo } from '@/api/index'
export default {
name: '',
data() {
@ -44,20 +45,45 @@ export default {
myChart2: '',//每月周转率echarts
myChart3: '',//当月出库金额echarts
myChart4: '',//积压物资
storeData: {
},
}
},
mounted() {
this.drawOutbound()
this.drawStore()
this.drawTurnoverChart()
this.drawOutbound()
this.drawOverStock()
},
computed: {
},
created() {
// 仓库的使用率
// getWarehouseUsages({wareHouseCode:'HA1'}).then(res=>{
// console.log(res,'仓库使用率');
// this.storeData = res.data.data
// this.drawStore(this.storeData)
// // console.log(this.storeData,'......');
// })
// getTurnoverRate({wareHouseCode:'HA1'}).then(res=>{
// console.log(res,'每月的周转率');
// this.drawTurnoverChart(res.data.data.rateList)
// })
// getBacklogMaterialInfo({wareHouseCode:'HA1'}).then(res=>{
// console.log(res,'积压物资');
// this.drawOverStock(res.data.data)
// })
// },
// 积压物资
},
methods: {
// 仓库使用率的ecahrt图
drawStore() {
drawStore(storeData) {
this.storemyChart = this.$echarts.init(this.$refs.storeUse)
const chartData = [
{
@ -70,6 +96,11 @@ export default {
},
];
if (storeData) {
chartData[0].value = storeData.usage
chartData[1].value = storeData.idleRate
}
const colorList = ['#f49a58', '#4351fd'];
const pieData1 = [];
// const pieData2 = [];
@ -140,7 +171,7 @@ export default {
},
formatter:
`{aa| ` + chartData[i].name + ` }{val| ` + parseInt(chartData[i].value / total * 100) + `% }`, // 也可以是个函数return
`{aa| ` + chartData[i].name + ` }{val| ` + chartData[i].value + `% }`, // 也可以是个函数return
x: "left",
textStyle: {
// color: "#BAFF7F",
@ -245,13 +276,23 @@ export default {
});
},
// 每日周转率
drawTurnoverChart() {
drawTurnoverChart(turnoverList) {
this.myChart2 = this.$echarts.init(this.$refs.turnoverChart)
var xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月']
var yDataArr = [0, 182, 191, 150, 0, 0, 0]
if (turnoverList) {
xDataArr = turnoverList.map(ele => {
return ele.month + '月'
})
yDataArr = turnoverList.map(ele => {
return ele.rate
})
}
var colors = ['#4587E7', '#55c3f6', '#4351fd', '#f49a58', '#da70d6', '#32cd32'];
let option = {
tooltip: {},
xAxis: {
boundaryGap: true,
type: 'category',
@ -301,7 +342,7 @@ export default {
}
},
},
name: '星期',
name: '周转率',
type: 'bar',
barWidth: 20,
data: yDataArr
@ -444,7 +485,7 @@ export default {
});
},
// 积压物质
drawOverStock() {
drawOverStock(overData) {
this.myChart4 = this.$echarts.init(this.$refs.oveChart)
var data = [
{
@ -457,6 +498,11 @@ export default {
},
];
if (overData) {
data[0].value = overData.backlogAmount
data[1].value = overData.noBacklogAmount
}
var total = data.reduce((pre, cur) => {
console.log(pre, cur.value, '数据');
return pre.value + cur.value
@ -487,7 +533,7 @@ export default {
color: colors[index],
},
formatter:
`{aa|20000万}\n{bb|总物资}`, // 也可以是个函数return
overData?`{aa|${overData.amount}万}\n{bb|总物资}`:`{aa|5241万}\n{bb|总物资}`, // 也可以是个函数return
x: "left",
textStyle: {
// color: "#BAFF7F",
@ -516,7 +562,7 @@ export default {
color: colors[index],
},
formatter:
`{aa|${(item.value / 100 * 100).toFixed(2)}% }\n{bb| ${item.name}占比}`, // 也可以是个函数return
overData?`{aa|${overData.noBacklogRate}% }\n{bb| ${item.name}占比}`:`{aa|${60}% }\n{bb| ${item.name}占比}`, // 也可以是个函数return
x: "left",
textStyle: {
// color: "#BAFF7F",

36
src/component/Stock.vue
View File

@ -16,9 +16,10 @@
</div>
<ul class="ul">
<li v-for="(s, i) in ulList" class="stockLi" :key="i">
<img :src="s.pic" alt="">
<img :src="pics[i]" alt="">
<span class="liName">{{ s.name }}:</span>
<span class="liNum" :class="'num' + i">{{ s.num }}&nbsp;<span style="font-size: 13px;">万元</span></span>
<span class="liNum" :class="'num' + i">{{ s.value }}&nbsp;<span
style="font-size: 13px;">{{ s.unit == true ? s.unit : '万元' }}</span></span>
</li>
</ul>
</div>
@ -51,27 +52,41 @@
</div>
</template>
<script>
import { getStore } from "@/api/index"
export default {
name: 'Stock',
data() {
return {
ulList: [
{ name: '非限制', pic: require('@/assets/images/upstock.png'), num: '26285.91' },
{ name: '质检', pic: require('@/assets/images/testing.png'), num: '1338.31' },
{ name: '冻结', pic: require('@/assets/images/freeze.png'), num: '2066.08' },
{ name: '非限制', value: '26285.91' },
{ name: '质检', value: '1338.31' },
{ name: '冻结', value: '2066.08' },
],
pics: [require('@/assets/images/upstock.png'), require('@/assets/images/testing.png'), require('@/assets/images/freeze.png')],
inputVal: '',
ISRList: [
{ productMsg: '镇江扬中国电电力线缆', address: 'B01-050103', num: '26823' },
{ productMsg: '镇江扬中国电电力线缆', address: 'B01-050104', num: '17895' },
],
textarea:''
textarea: ''
}
},
mounted() {
// 当月出库率
this.drawOutboundStock()
},
created() {
// 库存结构
// getStore({wareHouseCode:'HA1'}).then(res=>{
// // console.log(res,'库存结构');
// if(res.data.code==200){
// // console.log(res.data.data,'kulin');
// this.ulList = res.data.data.infoList
// // console.log(this.ulList);
// }
// })
},
computed: {
},
@ -289,15 +304,18 @@ export default {
display: flex;
justify-content: space-evenly;
flex-direction: column;
p>span:nth-child(1){
p>span:nth-child(1) {
display: inline-block;
width: 5em;
}
.address,.num{
.address,
.num {
font-family: quare;
color: #4c59fd;
}
.p1 {
width: 100%;

513
src/views/index.vue
View File

@ -1,272 +1,321 @@
<template>
<div class="aside">
<div class="aside-box">
<div class="left-item">
<div class="logo">
<img src="@/assets/images/logo.png" alt="">
</div>
<!-- 右边小图标样式 -->
<ul class="icons">
<li class="icon-item" ref="iconItem" v-for="(s, i) in asideList" data-num="0" :key="i"
@click="updateImg(i, $event)">
<img :src="i == index ? s.select : s.pic" alt="">
<span :style="i == index ? 'color:#2620b1' : ''">{{ s.name }}</span>
<div class="mark">
</div>
</li>
</ul>
</div>
<!-- <transition name="slide-fade"> -->
<!-- </transition> -->
<!-- <transition name="move"> -->
<!-- 库存组件 -->
<!-- <Stock v-if="index == 1" class="right-item" /> -->
<!-- 入库的组件 -->
<!-- <EnterStore v-if="index == 2" class="right-item" /> -->
<!-- 出库组件 -->
<!-- <OutStore v-if="index == 3" class="right-item" /> -->
<!-- <Manage v-if="index == 4" class="right-item" /> -->
<!-- </transition> -->
<keep-alive>
<transition name="slide-fade" mode="out-in">
<component ref="rightItem" :is="view" class="right-item"></component>
</transition>
</keep-alive>
<div class="aside">
<div class="aside-box">
<div class="left-item">
<div class="logo">
<img src="@/assets/images/logo.png" alt="" />
</div>
<!-- 右边小图标样式 -->
<ul class="icons">
<li
class="icon-item"
ref="iconItem"
v-for="(s, i) in asideList"
data-num="0"
:key="i"
@click="updateImg(i, $event)"
>
<img :src="i == index ? s.select : s.pic" alt="" />
<span :style="i == index ? 'color:#2620b1' : ''">{{ s.name }}</span>
<div class="mark"></div>
</li>
</ul>
</div>
<!-- <transition name="slide-fade"> -->
<!-- </transition> -->
<!-- <transition name="move"> -->
<!-- 库存组件 -->
<!-- <Stock v-if="index == 1" class="right-item" /> -->
<!-- 入库的组件 -->
<!-- <EnterStore v-if="index == 2" class="right-item" /> -->
<!-- 出库组件 -->
<!-- <OutStore v-if="index == 3" class="right-item" /> -->
<!-- <Manage v-if="index == 4" class="right-item" /> -->
<!-- </transition> -->
<keep-alive>
<transition name="slide-fade" mode="out-in">
<component ref="rightItem" :is="view" class="right-item"></component>
</transition>
</keep-alive>
</div>
</div>
</template>
<script>
// 库存组件
import Stock from '@/component/Stock.vue'
import Stock from "@/component/Stock.vue";
// 管理组件
import Manage from '@/component/Manage.vue'
import Manage from "@/component/Manage.vue";
// 入库组件
import EnterStore from '@/component/EnterStore.vue'
import EnterStore from "@/component/EnterStore.vue";
// 出库组件
import OutStore from '@/component/OutStore.vue'
import OverView from '@/component/OverView.vue'
import OutStore from "@/component/OutStore.vue";
import OverView from "@/component/OverView.vue";
import {getBacklogMaterialInfo,byPosition, byBatchAndMateri ,getWarehouseUsages,getTurnoverRate,getChangeAmount ,getInventoryAgeInfo ,getStore,getMaterialDataList} from "@/api/index";
export default {
name: 'index',
components: {
Stock,
Manage,
EnterStore,
OutStore,
OverView
name: "index",
components: {
Stock,
Manage,
EnterStore,
OutStore,
OverView,
},
data() {
return {
index: 0,
asideList: [
{
name: "总览",
select: require("@/assets/images/overview-select.png"),
pic: require("@/assets/images/overview-default.png"),
},
{
name: "库存",
select: require("@/assets/images/stock-select.png"),
pic: require("@/assets/images/stock-default.png"),
},
{
name: "入库",
select: require("@/assets/images/enter-select.png"),
pic: require("@/assets/images/enter-default.png"),
},
{
name: "出库",
select: require("@/assets/images/out-select.png"),
pic: require("@/assets/images/out-default.png"),
},
{
name: "管理",
select: require("@/assets/images/manage-select.png"),
pic: require("@/assets/images/manage-default.png"),
},
],
view: "",
asideShow: false,
};
},
mounted() {
// setTimeout(()=>{
this.view = "OverView";
// },2000)
// 获取仓位号接口
byPosition({ wareHouseCode: "HA1", position: "B01-010102" }).then((res) => {
console.log(res, "仓位号");
});
// 获取物料批次
byBatchAndMateri({ batch:"2021093009",wareHouseCode:'HA1' }).then((res) => {
console.log(res,'物料批次');
});
// // 仓库的使用率
// getWarehouseUsages({wareHouseCode:'HA1'}).then(res=>{
// console.log(res,'仓库使用率');
// })
//每月的周转率
// getTurnoverRate({wareHouseCode:'HA1'}).then(res=>{
// console.log(res,'每月的周转率');
// })
// 当月出入库金额
getChangeAmount({wareHouseCode:'HA1'}).then(res=>{
console.log(res,'当月出入库金额');
})
// 积压物资
// 库龄结构
getInventoryAgeInfo({wareHouseCode:'HA1'}).then(res=>{
console.log(res,'库龄结构');
})
// 库存构成
// getStore({wareHouseCode:'HA1'}).then(res=>{
// console.log(res,'库存结构');
// })
// 库容预测
// getMaterialDataList({method:'getYckc',LGUNM:"HA1",NY:"202304"}).then(res=>{
// console.log(res,'库容预测');
// })
},
created() {},
computed: {},
methods: {
// 切图
updateImg(i, event) {
// 当页面显示出来时 再次点击隐藏
this.asideShow = !this.asideShow;
if (this.index == i && this.asideShow) {
// console.log(1);
this.view = "";
return;
}
this.index = i;
// let rightBox = document.querySelector('.right-item')
// rightBox.style.transform = 'translateX(0)'
// console.log(rightBox,'dom元素');
// console.log(event.target,'....');
if (this.index == 0) {
// this.$nextTick(() => {
// // 总览界面echarts
// this.drawStore()
// this.drawTurnoverChart()
// this.drawOutbound()
// this.drawOverStock()
// })
this.view = "OverView";
} else if (this.index == 1) {
this.view = "Stock";
} else if (this.index == 2) {
this.view = "EnterStore";
} else if (this.index == 3) {
this.view = "OutStore";
} else if (this.index == 4) {
this.view = "Manage";
}
this.asideShow = false;
},
data() {
return {
index: 0,
asideList: [
{ name: '总览', select: require("@/assets/images/overview-select.png"), pic: require('@/assets/images/overview-default.png') },
{ name: '库存', select: require("@/assets/images/stock-select.png"), pic: require('@/assets/images/stock-default.png') },
{ name: '入库', select: require("@/assets/images/enter-select.png"), pic: require('@/assets/images/enter-default.png') },
{ name: '出库', select: require("@/assets/images/out-select.png"), pic: require('@/assets/images/out-default.png') },
{ name: '管理', select: require("@/assets/images/manage-select.png"), pic: require('@/assets/images/manage-default.png') }
],
view: '',
asideShow: false,
}
},
mounted() {
// setTimeout(()=>{
this.view = 'OverView'
// },2000)
},
created(){
},
computed: {
},
methods: {
// 切图
updateImg(i, event) {
// 当页面显示出来时 再次点击隐藏
this.asideShow = !this.asideShow
if (this.index == i && this.asideShow) {
// console.log(1);
this.view = ''
return
}
this.index = i
// let rightBox = document.querySelector('.right-item')
// rightBox.style.transform = 'translateX(0)'
// console.log(rightBox,'dom元素');
// console.log(event.target,'....');
if (this.index == 0) {
// this.$nextTick(() => {
// // 总览界面echarts
// this.drawStore()
// this.drawTurnoverChart()
// this.drawOutbound()
// this.drawOverStock()
// })
this.view = 'OverView'
} else if (this.index == 1) {
this.view = 'Stock'
} else if (this.index == 2) {
this.view = 'EnterStore'
} else if (this.index == 3) {
this.view = 'OutStore'
} else if (this.index == 4) {
this.view = 'Manage'
}
this.asideShow = false
}
},
}
},
};
</script>
<style scoped lang="less">
.mark {
// display: none;
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
// background-color: #888888;
// display: none;
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
// background-color: #888888;
}
.slide-fade-enter-active {
transition: all 1s;
transition: all 1s;
}
.slide-fade-leave-active {
transition: all 1s cubic-bezier(1.0, 0.5, 0.8, 1.0);
transition: all 1s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter,
.slide-fade-leave-to {
transform: translateX(-100%);
opacity: 0;
transform: translateX(-100%);
opacity: 0;
}
.aside {
width: 21.4%;
height: 100%;
width: 21.4%;
height: 100%;
display: flex;
align-items: center;
margin-left: 3%;
position: relative;
z-index: 99;
.aside-box {
width: 100%;
height: 92.6%;
overflow: hidden;
// background-color: rgba(229, 237, 242, .5);
border-radius: 20px;
display: flex;
align-items: center;
margin-left: 3%;
position: relative;
z-index: 99;
.aside-box {
width: 100%;
height: 92.6%;
overflow: hidden;
// background-color: rgba(229, 237, 242, .5);
border-radius: 20px;
.left-item {
width: 18.8%;
height: 100%;
background-color: #f7f8f9;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
position: relative;
z-index: 15;
.logo {
margin-top: 15px;
display: flex;
justify-content: center;
margin-bottom: 32px;
}
.left-item {
width: 18.8%;
height: 100%;
background-color: #f7f8f9;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
position: relative;
z-index: 15;
.icons {
width: 100%;
height: 10%;
.logo {
margin-top: 15px;
display: flex;
justify-content: center;
margin-bottom: 32px;
}
.icons {
width: 100%;
height: 10%;
.icon-item {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
align-content: center;
cursor: pointer;
position: relative;
img {
display: block;
}
span {
display: inline-block;
width: 100%;
text-align: center;
color: #888888;
}
}
}
}
.right-item {
width: 81.2%;
// display: none;
// opacity: 0;
// transition: all 1s;
height: 100%;
// transform: translateX(-100%);
background-color: rgba(229, 237, 242, .5);
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
position: relative;
z-index: 10;
.title {
font-size: 16px;
margin-left: 7%;
margin-bottom: 4%;
}
.storeUse {
width: 100%;
height: 21.5%;
}
.monthlyTurnover,
.outboundAmount {
width: 100%;
height: 25%;
.turnoverChart,
.outboundChart {
width: 90%;
height: 80%;
background-color: #fff;
margin: 0 auto;
border-radius: 10px;
}
}
.overStock {
height: calc(100% - 71.5%);
width: 100%;
.overChart {
width: 100%;
height: 80%;
}
}
.icon-item {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
align-content: center;
cursor: pointer;
position: relative;
img {
display: block;
}
span {
display: inline-block;
width: 100%;
text-align: center;
color: #888888;
}
}
}
}
.right-item {
width: 81.2%;
// display: none;
// opacity: 0;
// transition: all 1s;
height: 100%;
// transform: translateX(-100%);
background-color: rgba(229, 237, 242, 0.5);
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
position: relative;
z-index: 10;
.title {
font-size: 16px;
margin-left: 7%;
margin-bottom: 4%;
}
.storeUse {
width: 100%;
height: 21.5%;
}
.monthlyTurnover,
.outboundAmount {
width: 100%;
height: 25%;
.turnoverChart,
.outboundChart {
width: 90%;
height: 80%;
background-color: #fff;
margin: 0 auto;
border-radius: 10px;
}
}
.overStock {
height: calc(100% - 71.5%);
width: 100%;
.overChart {
width: 100%;
height: 80%;
}
}
}
}
}
</style>

66
vue.config.js
View File

@ -1,33 +1,33 @@
// const { defineConfig } = require('@vue/cli-service')
// module.exports = defineConfig({
// transpileDependencies: true
// })
module.exports = {
// 打包文件配置
publicPath: "/",
assetsDir: "static",
lintOnSave: false,
devServer: {
// overlay: { // 让浏览器 overlay 同时显示警告和错误
// warnings: true,
// errors: true,
// },
// hotOnly: true,
// open: false, // npm run serve后自动打开页面
// https: false, // https:{type:Boolean}
// host: "0.0.0.0", // 匹配本机IP地址(默认是0.0.0.0)
// port: 8989, // 开发服务器运行端口号
proxy: {
'/api': { //代理的名字
// target:'http://111.229.30.246:3111/',
target: 'http://ip:30005/gwcp/',
// target:'http://www.weather.com.cn/',
ws: true,
changeOrigin: true,
pathRewrite: {
'^/api': '',
}
},
}
}
}
// const { defineConfig } = require('@vue/cli-service')
// module.exports = defineConfig({
// transpileDependencies: true
// })
module.exports = {
// 打包文件配置
publicPath: "/",
assetsDir: "static",
lintOnSave: false,
devServer: {
// overlay: { // 让浏览器 overlay 同时显示警告和错误
// warnings: true,
// errors: true,
// },
// hotOnly: true,
// open: false, // npm run serve后自动打开页面
// https: false, // https:{type:Boolean}
// host: "0.0.0.0", // 匹配本机IP地址(默认是0.0.0.0)
// port: 8989, // 开发服务器运行端口号
proxy: {
'/api': { //代理的名字
// target:'http://111.229.30.246:3111/',
target: 'http://192.168.80.111:30005/gwcpedge/',
// target:'http://www.weather.com.cn/',
ws: true,
changeOrigin: true,
pathRewrite: {
'^/api': '',
}
},
}
}
}