添加看板跳转

master
夜笙歌 4 months ago
parent 453c590340
commit 36b4cf01ec

@ -1,46 +1,45 @@
import request from '@/utils/request1'
import request1 from '@/utils/request2'
import request from '@/utils/request'
// 出入库详情
export function inAndOutInfo(query) {
export function latestYearInOutStocks(query) {
return request({
url: '/FourthWmsBorder/inAndOutInfo',
url: '/wms/FourthFloorWmsBoard/latestYearInOutStocks',
method: 'get',
params: query
})
}
// 原材料库存占比
export function stockPercentage(query) {
export function getFourthFloorTotalProductStocks(query) {
return request({
url: '/FourthWmsBorder/stockPercentage',
url: '/wms/FourthFloorWmsBoard/getFourthFloorTotalProductStocks',
method: 'get',
params: query
})
}
// 采购订单
export function purchaseInfo(query) {
export function getFourthFloorProductInOutstockInfo(query) {
return request({
url: '/FourthWmsBorder/purchaseInfo',
url: '/wms/FourthFloorWmsBoard/getFourthFloorProductInOutstockInfo',
method: 'get',
params: query
})
}
// 生产订单物料需求
export function bomInfo(query) {
export function getFourthFloorPlateStockTotals(query) {
return request({
url: '/FourthWmsBorder/bomInfo',
url: '/wms/FourthFloorWmsBoard/getFourthFloorPlateStockTotals',
method: 'get',
params: query
})
}
// 成品出入库
export function productInAndOutInfo(query) {
export function getFourthFloorAccessoriesStockTotals(query) {
return request({
url: '/FourthWmsBorder/productInAndOutInfo',
url: '/wms/FourthFloorWmsBoard/getFourthFloorAccessoriesStockTotals',
method: 'get',
params: query
})

@ -4,6 +4,28 @@
<div class="data" id="data">{{ data }}</div>
<div class="time" id="time">{{ time }}</div>
<div class="date" id="date">{{ date }}</div>
<div class="top">
<div class="select">
<el-dropdown @command="handleCommand">
<span class="el-dropdown-link">
下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="/board/firstFloorProduction">一楼生产</el-dropdown-item>
<el-dropdown-item command="/board/firstFloorWarehouse">一楼能源</el-dropdown-item>
<el-dropdown-item command="/board/secondFloorProduction">二楼生产</el-dropdown-item>
<el-dropdown-item command="/board/secondFloorWarehouse">二楼仓储</el-dropdown-item>
<el-dropdown-item command="/board/thirdFloorProduction">三楼生产</el-dropdown-item>
<el-dropdown-item command="/board/thirdFloorWarehouse">三楼仓储</el-dropdown-item>
<el-dropdown-item command="/board/fourthFloorProduction">四楼生产</el-dropdown-item>
<el-dropdown-item command="/board/fourthFloorWarehouse">四楼仓储</el-dropdown-item>
<el-dropdown-item command="/board/fifthFloorProduction">五楼生产</el-dropdown-item>
<el-dropdown-item command="/board/fifthFloorWarehouse">五楼仓储</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
</div>
</template>
@ -16,7 +38,8 @@ export default {
return {
data:'',
time: '',
date: ''
date: '',
value: ''
}
},
created() {
@ -36,12 +59,41 @@ export default {
getDate()
getDateIntervalFun = setInterval(getDate, 1000)
},
methods:{
handleCommand(e){
this.$router.push(e)
}
},
beforeDestroy() {
getDateIntervalFun = null
}
}
</script>
<style scoped>
<style lang='less' scoped>
/deep/ .el-dropdown {
color: #fff;
}
.top{
position:absolute;
top:0;
left:0;
width:100%;
height:10%;
&:hover{
.select{
display:block
}
}
.select{
display:none;
position:absolute;
top:65%;
left:50%;
transform:translate(-50%,-50%);
color:#fff
}
}
.time, .date, .data {
position: absolute;
font-size: 0.8vw;

@ -21,19 +21,16 @@
<div class="table1">
<div style="background-color: #1077bc19">
<div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
任务编号
</div>
<div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
任务类型
物料编码
</div>
<div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
物料名称
</div>
<div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
库位编号
物料规格
</div>
<div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
时间
库存数量
</div>
</div>
<vue-seamless-scroll
@ -50,27 +47,22 @@
<div
class="scrollTableItem"
>
{{ item.taskCode }}
{{ item.materialCode }}
</div>
<div
class="scrollTableItem"
>
入库
{{item.materialName}}
</div>
<div
class="scrollTableItem"
>
{{ item.materialName }}
{{ item.materialSpec }}
</div>
<div
class="scrollTableItem"
>
{{ item.locationCode }}
</div>
<div
class="scrollTableItem"
>
{{ item.applylate }}
{{ item.totalAmount }}
</div>
</div>
</div>
@ -80,19 +72,16 @@
<div class="table2">
<div style="background-color: #1077bc19">
<div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
订单
</div>
<div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
物料
物料编码
</div>
<div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
物料需求
物料名称
</div>
<div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
Bom分解
物料规格
</div>
<div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
时间
库存数量
</div>
</div>
<vue-seamless-scroll
@ -102,34 +91,29 @@
style="height: calc(100% - 30px);overflow: hidden;"
>
<div
v-for="(item, index) in scrollTableData1"
v-for="(item, index) in scrollTableData"
:key="index"
>
<div :style='"background-color:" + ((index % 2 === 0)? "#1077bc19":"#1077bc05") '>
<div
class="scrollTableItem"
>
{{ item.orderCode }}
</div>
<div
class="scrollTableItem"
>
{{ item.materialName }}
{{ item.materialCode }}
</div>
<div
class="scrollTableItem"
>
{{ item.saleAmount }}
{{item.materialName}}
</div>
<div
class="scrollTableItem"
>
<!-- {{ item.value4 }}-->
{{ item.materialSpec }}
</div>
<div
class="scrollTableItem"
>
{{ item.releaseTime }}
{{ item.totalAmount }}
</div>
</div>
</div>
@ -160,7 +144,13 @@ import vueSeamlessScroll from 'vue-seamless-scroll'
import Chart from '@/components/board/Chart'
import HighChart from '@/components/board/HighChart'
import * as echarts from 'echarts'
import {} from '@/api/board/fourthFloorWarehouse'
import {
latestYearInOutStocks,
getFourthFloorTotalProductStocks,
getFourthFloorProductInOutstockInfo,
getFourthFloorPlateStockTotals,
getFourthFloorAccessoriesStockTotals
} from '@/api/board/fourthFloorWarehouse'
import { parseTime } from '@/utils/ruoyi'
const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
@ -236,226 +226,230 @@ export default {
},
methods: {
getData() {
let e = {
data: {
'rawInstockAmount': 28,
'rawOutstockAmount': 14,
'productInstockAmount': 8
}
}
this.topData.num1 = [...[0, 0, 0, 0], ...(e.data.rawInstockAmount || 0).toString().split('')].slice(-4)
this.topData.num2 = [...[0, 0, 0, 0], ...(e.data.rawOutstockAmount || 0).toString().split('')].slice(-4)
this.topData.num3 = [...[0, 0, 0, 0], ...(e.data.productInstockAmount || 0).toString().split('')].slice(-4)
this.$refs.chart1.setData({
tooltip: {
trigger: 'item'
},
grid: {
borderWidth: 0,
top: '10%',
left: '10%',
right: '10%',
bottom: '10%'
},
yAxis: {
type: 'category',
axisLabel: {
margin: 10,
color: '#ffffff63'
},
axisTick: {
show: true,
lineStyle: {
color: '#ffffff1f'
}
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#ffffff1f'
}
},
axisLine: {
lineStyle: {
color: '#fff3',
width: 2
}
latestYearInOutStocks().then(e=>{
this.topData.num1 = [...[0, 0, 0, 0], ...(e.data.rawInstockAmount || 0).toString().split('')].slice(-4)
this.topData.num2 = [...[0, 0, 0, 0], ...(e.data.rawOutstockAmount || 0).toString().split('')].slice(-4)
this.topData.num3 = [...[0, 0, 0, 0], ...(e.data.productInstockAmount || 0).toString().split('')].slice(-4)
})
getFourthFloorTotalProductStocks().then(e=>{
this.$refs.chart1.setData({
tooltip: {
trigger: 'item'
},
data: [1, 2, 3]
},
xAxis: {
type: 'value',
axisLabel: {
margin: 10,
color: '#ffffff63'
grid: {
borderWidth: 0,
top: '10%',
left: '10%',
right: '10%',
bottom: '10%'
},
axisLine: {
show: false
yAxis: {
type: 'category',
axisLabel: {
margin: 10,
color: '#ffffff63'
},
axisTick: {
show: true,
lineStyle: {
color: '#ffffff1f'
}
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#ffffff1f'
}
},
axisLine: {
lineStyle: {
color: '#fff3',
width: 2
}
},
data: e.data.map(v=>v.materialName)
},
axisTick: {
show: true,
lineStyle: {
color: '#ffffff1f'
xAxis: {
type: 'value',
axisLabel: {
margin: 10,
color: '#ffffff63'
},
axisLine: {
show: false
},
axisTick: {
show: true,
lineStyle: {
color: '#ffffff1f'
}
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#ffffff1f'
}
}
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#ffffff1f'
}
}
},
series: [
{
name: '',
type: 'bar',
barMaxWidth: '40px',
barWidth: '40%',
itemStyle: {
series: [
{
name: '',
type: 'bar',
barMaxWidth: '40px',
barWidth: '40%',
itemStyle: {
color: new echarts.graphic.LinearGradient(
0,
0,
1,
0,
[
{
offset: 0,
color: '#0a2ad7'
},
{
offset: 1,
color: '#138dd7'
}
],
false
)
color: new echarts.graphic.LinearGradient(
0,
0,
1,
0,
[
{
offset: 0,
color: '#0a2ad7'
},
{
offset: 1,
color: '#138dd7'
}
],
false
)
},
data: e.data.map(v=>v.totalAmount)
},
data: [11, 22, 3]
},
{
name: '',
type: 'pictorialBar',
barWidth: '40%',
barMaxWidth: '40px',
symbolSize: [5, '100%'],
symbolPosition: 'end',
symbolOffset: [3, 0],
barGap: '-100%',
itemStyle: {
color: '#138dd7'
},
data: [11, 22, 3]
}
]
{
name: '',
type: 'pictorialBar',
barWidth: '40%',
barMaxWidth: '40px',
symbolSize: [5, '100%'],
symbolPosition: 'end',
symbolOffset: [3, 0],
barGap: '-100%',
itemStyle: {
color: '#138dd7'
},
data: e.data.map(v=>v.totalAmount)
}
]
})
})
this.scrollTableData = []
this.scrollTableData1 = []
this.$refs.chart3.setData({
tooltip: {
trigger: 'axis',
axisPointer: {
//
type: 'shadow' // 线'line' | 'shadow'
}
},
grid: {
left: '2%',
right: '4%',
bottom: '14%',
top: '16%',
containLabel: true
},
legend: {
x: 'center',
top: 12,
textStyle: {
color: '#fff'
},
itemWidth: 12,
itemHeight: 10
// itemGap: 35
},
xAxis: {
type: 'category',
data: e.data.map(v => parseTime(v.day, '{m}-{d}')),
axisLine: {
lineStyle: {
color: 'white'
getFourthFloorProductInOutstockInfo().then(e=>{
this.$refs.chart3.setData({
tooltip: {
trigger: 'axis',
axisPointer: {
//
type: 'shadow' // 线'line' | 'shadow'
}
},
axisLabel: {
// interval: 0,
// rotate: 40,
grid: {
left: '2%',
right: '4%',
bottom: '14%',
top: '16%',
containLabel: true
},
legend: {
x: 'center',
top: 12,
textStyle: {
fontFamily: 'Microsoft YaHei'
}
}
},
yAxis: {
type: 'value',
axisLine: {
show: false,
lineStyle: {
color: 'white'
}
color: '#fff'
},
itemWidth: 12,
itemHeight: 10
// itemGap: 35
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(255,255,255,0.3)'
xAxis: {
type: 'category',
data: ['出入库信息'],
axisLine: {
lineStyle: {
color: 'white'
}
},
axisLabel: {
// interval: 0,
// rotate: 40,
textStyle: {
fontFamily: 'Microsoft YaHei'
}
}
},
axisLabel: {}
},
series: [
{
name: '入库',
type: 'bar',
barWidth: '15%',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#fccb05'
},
{
offset: 1,
color: '#f5804d'
}
])
yAxis: {
type: 'value',
axisLine: {
show: false,
lineStyle: {
color: 'white'
}
},
data: e.data.map(v => v.instockAmount)
},
{
name: '出库',
type: 'bar',
barWidth: '15%',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#8bd46e'
},
{
offset: 1,
color: '#09bcb7'
}
])
splitLine: {
show: true,
lineStyle: {
color: 'rgba(255,255,255,0.3)'
}
},
data: e.data.map(v => v.outStockAmount)
}
]
axisLabel: {}
},
series: [
{
name: '入库',
type: 'bar',
barWidth: '15%',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#fccb05'
},
{
offset: 1,
color: '#f5804d'
}
])
}
},
data: [e.data.productInstockAmount]
},
{
name: '出库',
type: 'bar',
barWidth: '15%',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#8bd46e'
},
{
offset: 1,
color: '#09bcb7'
}
])
}
},
data: [e.data.productOutStockAmount]
}
]
})
})
}
getFourthFloorPlateStockTotals().then(e=>{
console.log(e)
this.scrollTableData = e.data
})
getFourthFloorAccessoriesStockTotals().then(e=>{
this.scrollTableData1 = e.data
})
},
}
}
</script>
@ -564,7 +558,7 @@ export default {
.scrollTableItem {
display: inline-block;
width: calc(100% / 5);
width: calc(100% / 4);
text-align: center;
padding: 14px 0;
color: #4e99c5

Loading…
Cancel
Save