root/screenkb-hengsen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

数据

Browse Source
This commit is contained in:
蔡玲
2024-11-08 14:03:49 +08:00
parent 029e700848
commit cc5bd5ca7e
13 changed files with 547 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/header.vue
View File

@@ -1,7 +1,8 @@
<template>
<div class="n_header">
<div class="n_header_h1">
<h1>{{ title1 }}</h1>
<slot></slot>
<h1 v-if="type === '1'">{{ title1 }}</h1>
</div>
<p class="p_title">{{ title2 }}</p>
<div class="exit_btn iconfont" @click="back">&#xe85b;</div>
@@ -12,10 +13,10 @@
export default {
name: 'Header',
data () {
return {
}
return {}
},
props: {
type: String,
title1: String,
title2: String
},
@@ -50,14 +51,17 @@ export default {
.n_header_h1
width: 100%;
height: 100%;
padding-top 12px
// padding-top 12px
text-align center
h1
font-size: 19px;
font-weight: 700;
color: #fff;
line-height: 1;
line-height: 40px;
height: 40px;
text-align center;
letter-spacing 3px
padding-left 3px
.p_title
position absolute
left 1%
@@ -74,5 +78,5 @@ export default {
line-height 16px
font-size 16px
color #AECAF5
text-align: center;
text-align center
</style>

10
src/config/getData2.js
View File

@@ -1,3 +1,9 @@
import {post} from './http.js'
// 获取大屏所有数据
export const allDeviceStatus = () => post('api/chaoWei/allDeviceStatus', {})
// 查询拣选台
export const queryPickingPoint = () => post('api/board/queryPickingPoint', {})
// 拣选看板
export const pickingInfo = (code) => post('api/board/pickingInfo', {
code: code
})
// 仓储看板
export const synthesizeInfo = () => post('api/board/synthesizeInfo', {})

197
src/config/mork2.js
View File

@@ -7,7 +7,7 @@ export const getAllBigScreen = () => {
},
{
"count": "20",
"name": "物料一",
"name": "物料一物料一物料一物料一",
"percent": "10%"
},
{
@@ -34,26 +34,6 @@ export const getAllBigScreen = () => {
"count": "20",
"name": "物料六",
"percent": "10%"
},
{
"count": "20",
"name": "物料七",
"percent": "10%"
},
{
"count": "20",
"name": "物料八",
"percent": "10%"
},
{
"count": "20",
"name": "物料九",
"percent": "10%"
},
{
"count": "20",
"name": "物料十",
"percent": "10%"
}
],
historyInventoryIOAnalysis: [
@@ -235,3 +215,178 @@ export const getAllBigScreen = () => {
return res
}
export const queryPickingPoint = () => {
let res = [
{
"id": "1810932943246462976",
"code": "1308",
"name": "一号拣选位",
"product_area": "A1",
"region_code": "PICK01",
"point_type": null,
"lock_type": "0",
"group_code": null,
"point_location": "一号拣选位",
"remark": null,
"is_used": true,
"create_name": "管理员",
"create_time": "2024-07-10 15:03:53",
"update_name": "管理员",
"update_time": "2024-09-07 17:07:04",
"form_data": null,
"priority": "1",
"vehicle_code": null
},
{
"id": "1810933451587719168",
"code": "1311",
"name": "二号拣选位",
"product_area": "A1",
"region_code": "PICK01",
"point_type": null,
"lock_type": "0",
"group_code": null,
"point_location": "二号拣选位",
"remark": null,
"is_used": true,
"create_name": "管理员",
"create_time": "2024-07-10 15:05:55",
"update_name": "管理员",
"update_time": "2024-08-31 14:53:32",
"form_data": null,
"priority": "1",
"vehicle_code": null
}
]
return res
}
export const pickingInfo = () => {
let res = [
{
"qty": 100,
"vehicle_code": "X000010",
"create_time": null,
"update_time": null,
"stor_code": null,
"task_type": "PK20241107003",
"material_name": "测试物料",
"material_code": "24999999S",
"assign_qty": 111,
"single_weight": 15.70,
"theory_qty": 0,
"actual_weight": 0,
"remaining_qty": 100,
"form_data": "{\"stor_code\": \"FStockId\", \"point_code\": \"1308\", \"product_area\": \"A1\", \"vehicle_code\": \"X00007\"}",
"product_area": "A1"
},
{
"qty": 300,
"vehicle_code": "X00007",
"create_time": null,
"update_time": null,
"stor_code": null,
"task_type": "PK20241107004",
"material_name": "测试物料",
"material_code": "24999999S",
"assign_qty": 111,
"single_weight": 15.70,
"theory_qty": 0,
"actual_weight": 0,
"remaining_qty": 300,
"form_data": "{\"stor_code\": \"FStockId\", \"point_code\": \"1308\", \"product_area\": \"A1\", \"vehicle_code\": \"X00007\"}",
"product_area": "A1"
}
]
return res
}
export const synthesizeInfo = () => {
let res = {
"tp_used": {
"total": 960,
"used": 1,
"free": 959,
"percent": "0.1%"
},
"lx_out_week": [
{
"date": "11-08",
"total_qty": 2210.000
},
{
"date": "11-07",
"total_qty": "0"
},
{
"date": "11-06",
"total_qty": "0"
},
{
"date": "11-05",
"total_qty": "0"
},
{
"date": "11-04",
"total_qty": "0"
},
{
"date": "11-03",
"total_qty": "0"
},
{
"date": "11-02",
"total_qty": "0"
}
],
"tp_in_week": [],
"tp_inventory": [
{
"total": "0"
}
],
"lx_used": {
"total": 21424,
"used": 1,
"free": 21423,
"percent": "0.0%"
},
"tp_task": [
{
"total": 0,
"box": 0,
"time": "0h"
},
{
"total": 0,
"box": 0,
"time": "0h"
}
],
"lx_in_week": [],
"tp_out_week": [],
"lx_task": [
{
"total": 0,
"box": 0,
"time": "0h"
},
{
"total": 2210,
"box": 9,
"time": "5.0h"
}
],
"lx_inventory": [
{
"total": 200.000
},
{
"qty": 200.000,
"name": "测试物料",
"percent": "100.00%"
}
]
}
return res
}

5
src/main.js
View File

@@ -5,14 +5,17 @@ import router from './router'
import store from './vuex/store'
import './style/reset.css'
import './style/iconfont.styl'
import './style/layout.styl'
import * as echarts from 'echarts'
import 'default-passive-events'
import scroll from 'vue-seamless-scroll'
import {Message} from 'element-ui'
import {Message, Select, Option} from 'element-ui'
Vue.prototype.$echarts = echarts
Vue.use(scroll)
Vue.prototype.$message = Message
Vue.use(Select)
Vue.use(Option)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({

24
src/pages/Setup.vue
View File

@@ -14,6 +14,17 @@
<label>刷新时间（秒）</label>
<input type="number" class="inputStyle" v-model="setTime">
</div>
<div class="inputOuter">
<label>看板</label>
<el-select class="selectWraper" v-model="value" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</div>
<button class="btn" @click="_config">配置</button>
</div>
@@ -29,7 +40,9 @@ export default {
loginname: '',
password: '',
baseUrl: this.$store.getters.baseUrl,
setTime: this.$store.getters.setTime / 1000
setTime: this.$store.getters.setTime / 1000,
options: [{value: 1, label: '拣选台'}, {value: 2, label: '仓储监控'}],
value: this.$store.getters.pageNo
}
},
methods: {
@@ -50,10 +63,11 @@ export default {
}
let obj = {
baseUrl: this.baseUrl,
setTime: this.setTime * 1000
setTime: this.setTime * 1000,
pageNo: this.value
}
this.$store.dispatch('setConfig', obj)
this.$router.push('/index1')
this.$router.push('/index' + this.value)
let element = document.documentElement
if (!(document.fullscreenElement || document.mozFullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement)) {
if (element.requestFullscreen) {
@@ -136,4 +150,8 @@ label
font-size 15px
line-height 40px
color #333333
.selectWraper
_wh(calc(100% - 116px), 40px)
font-size 14px
line-height 40px
</style>

161
src/pages/modules/index1.vue
View File

@@ -1,55 +1,139 @@
<template>
<div class="box relative">
<t-header title1="1号拣选台" title2="浙江恒森实业集团WMS系统"></t-header>
<t-header title2="浙江恒森实业集团WMS系统">
<el-select class="header_select" v-model="value" placeholder="请选择" @change="change">
<el-option
v-for="item in options"
:key="item.code"
:label="item.name"
:value="item.code">
</el-option>
</el-select>
</t-header>
<div class="box body_container">
<div class="relative n_wraper">
<div v-if="itemData.length >= 1" class="relative n_wraper">
<div class="absolute bg_j bg_j_1"></div>
<div class="absolute bg_j bg_j_2"></div>
<div class="absolute bg_j bg_j_3"></div>
<div class="absolute bg_j bg_j_4"></div>
<div class="relative title_wraper">
<p class="relative title_h1">装配一车间</p>
<p class="absolute title_h2">当前任务-M0102240501001</p>
<p class="absolute title_h2">当前任务&nbsp;-&nbsp;<span style="color: #00b678;font-weight: 700;">{{ itemData[0].task_code }}</span></p>
</div>
<div class="zd-row content_wraper">
<div class="zd-col-20">
<div class="zd-row flexwrap item_wraper">
<div class="info_item" v-for="(e, i) in itemData" :key="i">
<div class="info_item">
<div class="box zd-row jccenter info_item_i">
<div class="zd-col-8 item_label">{{ e.label }}</div>
<div class="zd-col-16 item_value">{{ e.value }}<span class="item_unit">{{ e.unit }}</span></div>
<div class="zd-col-8 item_label">库内料箱</div>
<div class="zd-col-16 item_value">{{ itemData[0].vehicle_code }}<span class="item_unit"></span></div>
</div>
</div>
<div class="info_item">
<div class="box zd-row jccenter info_item_i">
<div class="zd-col-8 item_label">物料名称</div>
<div class="zd-col-16 item_value">{{ itemData[0].material_name }}<span class="item_unit"></span></div>
</div>
</div>
<div class="info_item">
<div class="box zd-row jccenter info_item_i">
<div class="zd-col-8 item_label">规格</div>
<div class="zd-col-16 item_value">{{ itemData[0].material_spec }}<span class="item_unit"></span></div>
</div>
</div>
<div class="info_item">
<div class="box zd-row jccenter info_item_i">
<div class="zd-col-8 item_label">数量</div>
<div class="zd-col-16 item_value">{{ itemData[0].qty }}<span class="item_unit">个</span></div>
</div>
</div>
<div class="info_item">
<div class="box zd-row jccenter info_item_i">
<div class="zd-col-8 item_label">需出数量</div>
<div class="zd-col-16 item_value">{{ itemData[0].assign_qty }}<span class="item_unit">个</span></div>
</div>
</div>
<div class="info_item">
<div class="box zd-row jccenter info_item_i">
<div class="zd-col-8 item_label">单重</div>
<div class="zd-col-16 item_value">{{ itemData[0].single_weight }}<span class="item_unit">g</span></div>
</div>
</div>
<div class="info_item">
<div class="box zd-row jccenter info_item_i">
<div class="zd-col-8 item_label">拣选称重</div>
<div class="zd-col-16 item_value">{{ itemData[0].actual_weight }}<span class="item_unit">g</span></div>
</div>
</div>
<div class="info_item">
<div class="box zd-row jccenter info_item_i">
<div class="zd-col-8 item_label">理论数量</div>
<div class="zd-col-16 item_value">{{ itemData[0].theory_qty }}<span class="item_unit">个</span></div>
</div>
</div>
<div class="info_item">
<div class="box zd-row jccenter info_item_i">
<div class="zd-col-8 item_label">箱内剩余</div>
<div class="zd-col-16 item_value">{{ itemData[0].remaining_qty }}<span class="item_unit">个</span></div>
</div>
</div>
</div>
</div>
<div class="zd-col-4 tip_wraper">
<div class="tip_txt">料箱D00001拣选成功！</div>
<div class="zd-col-4 tip_wraper" :class="itemData[0].assign_qty === itemData[0].theory_qty ? 'tip_wraper_bg1' : 'tip_wraper_bg2'">
<div class="tip_txt">料箱{{ itemData[0].vehicle_code }}<br/>{{itemData[0].assign_qty === itemData[0].theory_qty ? '拣选成功！' : '称重错误！'}}</div>
</div>
</div>
</div>
<div class="relative n_wraper">
<div v-if="itemData.length >= 2" class="relative n_wraper">
<div class="absolute bg_j bg_j_1"></div>
<div class="absolute bg_j bg_j_2"></div>
<div class="absolute bg_j bg_j_3"></div>
<div class="absolute bg_j bg_j_4"></div>
<div class="relative title_wraper">
<p class="relative title_h1">装配一车间</p>
<p class="absolute title_h2">当前任务-M0102240501001</p>
<p class="relative title_h1">装配二车间</p>
<p class="absolute title_h2">当前任务&nbsp;-&nbsp;<span style="color: #00b678;font-weight: 700;">{{ itemData[1].task_code }}</span></p>
</div>
<div class="zd-row content_wraper">
<div class="zd-col-20">
<div class="zd-col-24">
<div class="zd-row flexwrap item_wraper">
<div class="info_item" v-for="(e, i) in itemData" :key="i">
<div class="info_item">
<div class="box zd-row jccenter info_item_i">
<div class="item_label">{{ e.label }}</div>
<div class="item_value">{{ e.value }}<span class="item_unit">{{ e.unit }}</span></div>
<div class="zd-col-8 item_label">料箱号</div>
<div class="zd-col-16 item_value">{{ itemData[1].vehicle_code }}<span class="item_unit"></span></div>
</div>
</div>
<div class="info_item">
<div class="box zd-row jccenter info_item_i">
<div class="zd-col-8 item_label">物料名称</div>
<div class="zd-col-16 item_value">{{ itemData[1].material_name }}<span class="item_unit"></span></div>
</div>
</div>
<div class="info_item">
<div class="box zd-row jccenter info_item_i">
<div class="zd-col-8 item_label">规格</div>
<div class="zd-col-16 item_value">{{ itemData[1].material_spec }}<span class="item_unit"></span></div>
</div>
</div>
<div class="info_item">
<div class="box zd-row jccenter info_item_i">
<div class="zd-col-8 item_label">数量</div>
<div class="zd-col-16 item_value">{{ itemData[1].qty }}<span class="item_unit">个</span></div>
</div>
</div>
<div class="info_item">
<div class="box zd-row jccenter info_item_i">
<div class="zd-col-8 item_label">需出数量</div>
<div class="zd-col-16 item_value">{{ itemData[1].assign_qty }}<span class="item_unit">个</span></div>
</div>
</div>
<div class="info_item">
<div class="box zd-row jccenter info_item_i">
<div class="zd-col-8 item_label">单重</div>
<div class="zd-col-16 item_value">{{ itemData[1].single_weight }}<span class="item_unit">g</span></div>
</div>
</div>
</div>
</div>
<div class="zd-col-4 tip_wraper">
<div class="tip_txt">料箱D00001拣选成功！</div>
</div>
</div>
</div>
</div>
@@ -58,16 +142,55 @@
<script>
import THeader from '@components/header.vue'
import { queryPickingPoint, pickingInfo } from '@js/getData2.js'
export default {
components: {
THeader
},
data () {
return {
itemData: [{label: '库内料箱', value: 'D00001'}, {label: '物料名称', value: '阀体部件'}, {label: '规格', value: 'LQF-X03-07A'}, {label: '数量', value: '50', unit: '个'}, {label: '需出数量', value: '15', unit: '个'}, {label: '单重', value: '135', unit: 'g'}, {label: '拣选称重', value: '2025', unit: 'g'}, {label: '理论数量', value: '15', unit: '个'}, {label: '箱内剩余', value: '35', unit: '个'}]
interTime: this.$store.getters.setTime,
timer: null,
options: [],
value: '',
itemData: []
}
},
created () {
this._queryPickingPoint()
},
beforeDestroy () {
if (this.timer !== null) {
clearInterval(this.timer)
}
},
methods: {
refresh () {
this._pickingInfo()
this.timer = setInterval(() => {
this._pickingInfo()
}, this.interTime)
},
async _pickingInfo () {
let res = await pickingInfo(this.value)
this.itemData = [...res]
},
async _queryPickingPoint () {
let res = await queryPickingPoint()
this.options = [...res]
if (res.length > 0) {
this.value = res[0].code
this.refresh()
}
},
change (e) {
if (e) {
if (this.timer !== null) {
clearInterval(this.timer)
}
this.refresh()
}
}
}
}
</script>

236
src/pages/modules/index2.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="box relative">
<t-header title1="仓储监控" title2="恒森集团WMS仓储看板"></t-header>
<t-header type="1" title1="仓储监控" title2="恒森集团WMS仓储看板"></t-header>
<div class="box body_container">
<div class="relative b_title">
<span class="absolute sj_icon"></span>
@@ -16,20 +16,20 @@
<p class="title">货位使用</p>
<div class="zd-row wraper_4">
<div class="box percent_item">
<p>60%</p>
<p>{{ lx_used.percent }}</p>
</div>
<div class="box zd-col-16 zd-row flexcol">
<div class="zd-row">
<p class="zd-col-8 item_label">总货位数</p>
<p class="zd-col-16 item_value">20574<span class="item_unit">个</span></p>
<p class="zd-col-16 item_value">{{ lx_used.total }}<span class="item_unit">个</span></p>
</div>
<div class="zd-row">
<p class="zd-col-8 item_label">已用货位</p>
<p class="zd-col-16 item_value">20574<span class="item_unit">个</span></p>
<p class="zd-col-16 item_value">{{ lx_used.used }}<span class="item_unit">个</span></p>
</div>
<div class="zd-row">
<p class="zd-col-8 item_label">空余货位</p>
<p class="zd-col-16 item_value">20574<span class="item_unit">个</span></p>
<p class="zd-col-16 item_value">{{ lx_used.free }}<span class="item_unit">个</span></p>
</div>
</div>
</div>
@@ -40,14 +40,32 @@
<div class="absolute bg_j bg_j_3"></div>
<div class="absolute bg_j bg_j_4"></div>
<p class="title">今日出入库</p>
<div class="wraper_4 zd-row flexcol jccenter">
<div class="zd-row">
<div class="zd-col-4 item_label">入库</div>
<div class="zd-col-20 item_value font_1">总数量：1500 箱数:30箱 耗时:1.5h</div>
<div v-if="lx_task.length > 1" class="wraper_4 zd-row flexcol jccenter">
<div class="zd-row flexstart mgb8">
<div class="zd-col-3 item_label">入库</div>
<div class="zd-col-20">
<div class="percent_line">
<div class="percent_i" :style="{'width': lx_task[0].total !== 0 ? lx_task[0].box / lx_task[0].total * 100 + '100%' : 0}"></div>
</div>
<div class="zd-row">
<p class="item_label">总数量：{{ lx_task[0].total }}</p>
<p class="item_label">箱数：{{ lx_task[0].box }}箱</p>
<p class="item_label">耗时：{{ lx_task[0].time }}</p>
</div>
</div>
</div>
<div class="zd-row">
<div class="zd-col-4 item_label">出库</div>
<div class="zd-col-20 item_value font_1">总数量：1500 箱数:30箱 耗时:1.5h</div>
<div class="zd-row flexstart">
<div class="zd-col-3 item_label">出库</div>
<div class="zd-col-20">
<div class="percent_line">
<div class="percent_i" :style="{'width': lx_task[1].total !== 0 ? lx_task[1].box / lx_task[1].total * 100 + '100%' : 0}"></div>
</div>
<div class="zd-row">
<p class="item_label">总数量：{{ lx_task[1].total }}</p>
<p class="item_label">箱数：{{ lx_task[1].box }}箱</p>
<p class="item_label">耗时：{{ lx_task[1].time }}</p>
</div>
</div>
</div>
</div>
</div>
@@ -63,15 +81,13 @@
<div class="box zd-col-11">
<div ref="echartsRef1" style="width: 100%; height: 100%;"></div>
</div>
<div class="box zd-col-13 zd-row flexwrap jcflexstart">
<div class="zd-col-11 zd-row flexstart" v-for="(e, i) in materList.slice(1)" :key="i">
<div class="box zd-col-13 zd-row flexwrap jcflexstart aligncenter">
<div class="zd-col-12 zd-row flexstart pie_item_wrap" v-for="(e, i) in lx_inventory.slice(1)" :key="i">
<div class="pie_legend_icon" :style="{'backgroundColor': ['#1980EA', '#67D470', '#B4C9EF', '#BCBF5C', '#EF5252', '#6d5edd', '#bf41bb', '#f65621', '#21f6eb', '#64b0ad'][i]}"></div>
<div class="zd-col-24">
<p class="pie_legend_txt_1">{{ e.name }}</p>
<div class="zd-row jcflexstart">
<p class="pie_legend_txt_2">{{ e.count }}</p>
<p class="pie_legend_txt_3">{{ e.percent }}</p>
</div>
<p class="pie_legend_txt_2">{{ e.qty }}</p>
<p class="pie_legend_txt_3">{{ e.percent }}</p>
</div>
</div>
</div>
@@ -105,20 +121,20 @@
<p class="title">货位使用</p>
<div class="zd-row wraper_4">
<div class="box percent_item">
<p>60%</p>
<p>{{ tp_used.percent }}</p>
</div>
<div class="box zd-col-16 zd-row flexcol">
<div class="zd-row">
<p class="zd-col-8 item_label">总货位数</p>
<p class="zd-col-16 item_value">20574<span class="item_unit">个</span></p>
<p class="zd-col-16 item_value">{{ tp_used.total }}<span class="item_unit">个</span></p>
</div>
<div class="zd-row">
<p class="zd-col-8 item_label">已用货位</p>
<p class="zd-col-16 item_value">20574<span class="item_unit">个</span></p>
<p class="zd-col-16 item_value">{{ tp_used.used }}<span class="item_unit">个</span></p>
</div>
<div class="zd-row">
<p class="zd-col-8 item_label">空余货位</p>
<p class="zd-col-16 item_value">20574<span class="item_unit">个</span></p>
<p class="zd-col-16 item_value">{{ tp_used.free }}<span class="item_unit">个</span></p>
</div>
</div>
</div>
@@ -129,14 +145,32 @@
<div class="absolute bg_j bg_j_3"></div>
<div class="absolute bg_j bg_j_4"></div>
<p class="title">今日出入库</p>
<div class="wraper_4 zd-row flexcol jccenter">
<div class="zd-row">
<div class="zd-col-4 item_label">入库</div>
<div class="zd-col-20 item_value font_1">总数量：1500 箱数:30箱 耗时:1.5h</div>
<div v-if="tp_task.length > 1" class="wraper_4 zd-row flexcol jccenter">
<div class="zd-row flexstart mgb8">
<div class="zd-col-3 item_label">入库</div>
<div class="zd-col-20">
<div class="percent_line">
<div class="percent_i" :style="{'width': tp_task[0].total !== 0 ? tp_task[0].box / tp_task[0].total * 100 + '100%' : 0}"></div>
</div>
<div class="zd-row">
<p class="item_label">总数量：{{ tp_task[0].total }}</p>
<p class="item_label">箱数：{{ tp_task[0].box }}箱</p>
<p class="item_label">耗时：{{ tp_task[0].time }}</p>
</div>
</div>
</div>
<div class="zd-row">
<div class="zd-col-4 item_label">出库</div>
<div class="zd-col-20 item_value font_1">总数量：1500 箱数:30箱 耗时:1.5h</div>
<div class="zd-row flexstart">
<div class="zd-col-3 item_label">出库</div>
<div class="zd-col-20">
<div class="percent_line">
<div class="percent_i" :style="{'width': tp_task[1].total !== 0 ? tp_task[1].box / tp_task[1].total * 100 + '100%' : 0}"></div>
</div>
<div class="zd-row">
<p class="item_label">总数量：{{ tp_task[1].total }}</p>
<p class="item_label">箱数：{{ tp_task[1].box }}箱</p>
<p class="item_label">耗时：{{ tp_task[1].time }}</p>
</div>
</div>
</div>
</div>
</div>
@@ -153,12 +187,12 @@
<div ref="echartsRef3" style="width: 100%; height: 100%;"></div>
</div>
<div class="box zd-col-13 zd-row flexwrap jcflexstart">
<div class="zd-col-11 zd-row flexstart" v-for="(e, i) in materList.slice(1)" :key="i">
<div class="zd-col-11 zd-row flexstart" v-for="(e, i) in tp_inventory.slice(1)" :key="i">
<div class="pie_legend_icon" :style="{'backgroundColor': ['#1980EA', '#67D470', '#B4C9EF', '#BCBF5C', '#EF5252', '#6d5edd', '#bf41bb', '#f65621', '#21f6eb', '#64b0ad'][i]}"></div>
<div class="zd-col-24">
<p class="pie_legend_txt_1">{{ e.name }}</p>
<div class="zd-row jcflexstart">
<p class="pie_legend_txt_2">{{ e.count }}</p>
<p class="pie_legend_txt_2">{{ e.qty }}</p>
<p class="pie_legend_txt_3">{{ e.percent }}</p>
</div>
</div>
@@ -186,7 +220,7 @@
<script>
import THeader from '@components/header.vue'
import { getAllBigScreen } from '@js/mork2.js'
import { synthesizeInfo } from '@js/getData2.js'
export default {
components: {
THeader
@@ -200,7 +234,17 @@ export default {
myChart1: null,
myChart2: null,
myChart3: null,
myChart4: null
myChart4: null,
lx_in_week: [], // 料箱库入库趋势
lx_out_week: [], // 料箱库出库趋势
tp_in_week: [], // 托盘库入库趋势
tp_out_week: [], // 托盘库出库趋势
lx_inventory: [], // 料箱实时库存
tp_inventory: [], // 托盘实时库存
lx_used: {}, // 料箱货位使用
tp_used: {}, // 托盘库货位使用
lx_task: [], // 料箱今日出入库
tp_task: [] // 托盘库今日出入库
}
},
created () {
@@ -213,6 +257,9 @@ export default {
this.myChart4 = this.$echarts.init(this.$refs.echartsRef4)
},
destroyed () {
if (this.timer !== null) {
clearInterval(this.timer)
}
if (this.myChart1 !== null) {
this.myChart1.dispose()
this.myChart1 = null
@@ -232,15 +279,23 @@ export default {
},
methods: {
refresh () {
this._allDeviceStatus()
this._synthesizeInfo()
this.timer = setInterval(() => {
this._allDeviceStatus()
this._synthesizeInfo()
}, this.interTime)
},
async _allDeviceStatus () {
let res = await getAllBigScreen()
this.materList = [...res.inventoryAnalysis]
this.historyList = [...res.historyInventoryIOAnalysis]
async _synthesizeInfo () {
let res = await synthesizeInfo()
this.lx_used = res.lx_used
this.tp_used = res.tp_used
this.lx_in_week = [...res.lx_in_week]
this.lx_out_week = [...res.lx_out_week]
this.lx_task = [...res.lx_task]
this.tp_task = [...res.tp_task]
this.tp_in_week = [...res.tp_in_week]
this.tp_out_week = [...res.tp_out_week]
this.lx_inventory = [...res.lx_inventory]
this.tp_inventory = [...res.tp_inventory]
this.setEchart1()
this.setEchart2()
this.setEchart3()
@@ -250,13 +305,12 @@ export default {
let colors = ['#1980EA', '#67D470', '#B4C9EF', '#BCBF5C', '#EF5252', '#6d5edd', '#bf41bb', '#f65621', '#21f6eb', '#64b0ad']
let colorListIn = ['rgba(15, 45, 115, .1)', '#67D470', '#B4C9EF', '#BCBF5C', '#EF5252', '#6d5edd', '#bf41bb', '#f65621', '#21f6eb', '#64b0ad']
let colorListOut = ['#1980EA', 'rgba(15, 45, 115, .1)', 'rgba(15, 45, 115, .1)', 'rgba(15, 45, 115, .1)', 'rgba(15, 45, 115, .1)', 'rgba(15, 45, 115, .1)', 'rgba(15, 45, 115, .1)', 'rgba(15, 45, 115, .1)', 'rgba(15, 45, 115, .1)', 'rgba(15, 45, 115, .1)']
let seriesData = this.materList.slice(1)
let seriesData = this.lx_inventory.slice(1)
seriesData.map(el => {
el.value = el.count
el.value = el.qty
el.name = el.name
seriesData.push(el.name)
})
let total = this.materList[0].count
let total = this.lx_inventory[0].total
let option = {
color: colors,
grid: {
@@ -376,17 +430,15 @@ export default {
this.myChart1.setOption(option, true)
},
setEchart2 () {
let total = 0
this.historyList.map(el => {
total = Math.max(total, Number(el.total_instorage_qty), Number(el.total_outstorage_qty))
})
let barName = []
let barData1 = []
let barData2 = []
this.historyList.map(el => {
barName.push(el.data)
barData1.push(el.total_instorage_qty)
barData2.push(el.total_outstorage_qty)
this.lx_in_week.map(el => {
barData1.push(el.total_qty)
})
this.lx_out_week.map(el => {
barName.push(el.date)
barData2.push(el.total_qty)
})
let option = {
grid: {
@@ -427,31 +479,7 @@ export default {
rotate: 45,
color: '#7591B2',
fontSize: 12,
lineHeight: 12,
// align: 'right',
margin: 5
// formatter: (value) => {
// let str = ''
// let num = 5
// let valLength = value.length
// let rowNum = Math.ceil(valLength / num)
// if (rowNum > 1) {
// for (let i = 0; i < rowNum; i++) {
// let temp = ''
// let start = i * num
// let end = start + num
// if (i === rowNum - 1) {
// temp = value.substring(start, end)
// } else {
// temp = value.substring(start, end) + '\n'
// }
// str += temp
// }
// return str
// } else {
// return value
// }
// }
lineHeight: 12
},
data: barName
},
@@ -475,8 +503,8 @@ export default {
type: [2, 1],
color: '#455C86'
}
},
max: total
}
// max: total
},
series: [
{
@@ -537,13 +565,12 @@ export default {
let colors = ['#1980EA', '#67D470', '#B4C9EF', '#BCBF5C', '#EF5252', '#6d5edd', '#bf41bb', '#f65621', '#21f6eb', '#64b0ad']
let colorListIn = ['rgba(15, 45, 115, .1)', '#67D470', '#B4C9EF', '#BCBF5C', '#EF5252', '#6d5edd', '#bf41bb', '#f65621', '#21f6eb', '#64b0ad']
let colorListOut = ['#1980EA', 'rgba(15, 45, 115, .1)', 'rgba(15, 45, 115, .1)', 'rgba(15, 45, 115, .1)', 'rgba(15, 45, 115, .1)', 'rgba(15, 45, 115, .1)', 'rgba(15, 45, 115, .1)', 'rgba(15, 45, 115, .1)', 'rgba(15, 45, 115, .1)', 'rgba(15, 45, 115, .1)']
let seriesData = this.materList.slice(1)
let seriesData = this.tp_inventory.slice(1)
seriesData.map(el => {
el.value = el.count
el.value = el.qty
el.name = el.name
seriesData.push(el.name)
})
let total = this.materList[0].count
let total = this.tp_inventory[0].total
let option = {
color: colors,
grid: {
@@ -663,17 +690,15 @@ export default {
this.myChart3.setOption(option, true)
},
setEchart4 () {
let total = 0
this.historyList.map(el => {
total = Math.max(total, Number(el.total_instorage_qty), Number(el.total_outstorage_qty))
})
let barName = []
let barData1 = []
let barData2 = []
this.historyList.map(el => {
barName.push(el.data)
barData1.push(el.total_instorage_qty)
barData2.push(el.total_outstorage_qty)
this.tp_in_week.map(el => {
barName.push(el.date)
barData1.push(el.total_qty)
})
this.tp_out_week.map(el => {
barData2.push(el.total_qty)
})
let option = {
grid: {
@@ -714,31 +739,7 @@ export default {
rotate: 45,
color: '#7591B2',
fontSize: 12,
lineHeight: 12,
// align: 'right',
margin: 5
// formatter: (value) => {
// let str = ''
// let num = 5
// let valLength = value.length
// let rowNum = Math.ceil(valLength / num)
// if (rowNum > 1) {
// for (let i = 0; i < rowNum; i++) {
// let temp = ''
// let start = i * num
// let end = start + num
// if (i === rowNum - 1) {
// temp = value.substring(start, end)
// } else {
// temp = value.substring(start, end) + '\n'
// }
// str += temp
// }
// return str
// } else {
// return value
// }
// }
lineHeight: 12
},
data: barName
},
@@ -762,8 +763,7 @@ export default {
type: [2, 1],
color: '#455C86'
}
},
max: total
}
},
series: [
{
@@ -826,6 +826,8 @@ export default {
<style lang="stylus" scoped>
@import './style.stylus'
.body_container
padding-top 38px
.mgr8
margin-right 8px
.mgb8

6
src/pages/modules/index3.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="box relative">
<t-header title1="领料出库" title2="恒森集团WMS仓储看板"></t-header>
<t-header type="1" title1="领料出库" title2="恒森集团WMS仓储看板"></t-header>
<div class="box zd-row body_container">
<div class="box zd-col-8">
<div class="relative wraper_1 mgb8">
@@ -20,10 +20,10 @@
<div class="absolute bg_j bg_j_4"></div>
<p class="title">缓存库库存</p>
<div class="zd-row wraper_2">
<div class="box zd-col-11">
<div class="box zd-col-9">
<div ref="echartsRef2" style="width: 100%; height: 100%;"></div>
</div>
<div class="box zd-col-13 zd-row flexwrap jcflexstart">
<div class="box zd-col-15 zd-row flexwrap jcflexstart">
<div class="zd-col-11 zd-row flexstart" v-for="(e, i) in materList.slice(1)" :key="i">
<div class="pie_legend_icon" :style="{'backgroundColor': ['#1980EA', '#67D470', '#B4C9EF', '#BCBF5C', '#EF5252', '#6d5edd', '#bf41bb', '#f65621', '#21f6eb', '#64b0ad'][i]}"></div>
<div class="zd-col-24">

51
src/pages/modules/style.stylus
View File

@@ -3,10 +3,12 @@
overflow hidden
.n_wraper
width 100%
height calc(50% - 4px)
border 1px solid #0c99ac
&:first-child
margin-bottom 8px
&:nth-child(1)
height calc(58% - 10px)
margin-bottom 10px
&:nth-child(2)
height 42%
.title_wraper
height 26px
text-align center
@@ -37,24 +39,29 @@
.item_wraper
padding-right 3%
.info_item
width 30%
height 50px
margin 6px 0
height 66px
padding 3px
border 1px solid #168abd
border-radius 4px
&:nth-child(3n+1), &:nth-child(3n+3)
width 30%
&:nth-child(3n+2)
margin-left 5%
margin-right 5%
width 36%
margin-left 2%
margin-right 2%
&:nth-child(4), &:nth-child(5), &:nth-child(6), &:nth-child(7), &:nth-child(8), &:nth-child(9)
margin-top 6px
.info_item_i
border-radius 2px
box-shadow inset 0px 0px 5px 3px #1198bf
.item_label
font-size 13px
line-height 13px
color #fff
text-align right
.item_value
font-size 16px
font-size 14px
line-height 14px
color #5bd0f5
font-weight 700
text-align center
@@ -66,10 +73,17 @@
.tip_wraper
height 100%
padding 3% 2% 0 2%
.tip_wraper_bg1
background center 90% / 100% auto url('../../images/bg_tip.png') no-repeat
.tip_txt
color #00c8ed
.tip_wraper_bg2
background center 90% / 100% auto url('../../images/bg_tip_1.png') no-repeat
.tip_txt
color #9d5a00
.tip_txt
font-size 20px
color #67D470
text-align center
.b_title
height 20px
padding-left 20px
@@ -88,6 +102,10 @@
border-left 4px solid transparent
border-right 4px solid #00d6ff
border-bottom 4px solid #00d6ff
.pie_item_wrap
min-height 32%
&:nth-child(n+3)
margin-top 10px
.pie_legend_icon
width 8px
height 8px
@@ -101,7 +119,7 @@
margin-bottom 4px
.pie_legend_txt_2
font-size 12px
line-height: 12px
line-height: 14px
color: #fff
margin-right 4px
.pie_legend_txt_3
@@ -187,4 +205,13 @@
padding 0 1px
overflow hidden
&:nth-child(1)
width 10%
width 10%
.percent_line
height 10px
background-color #00ccf2
border-radius 10px
margin-bottom 2px
.percent_i
height 10px
background-color #f5aa00
border-radius 10px

21
src/style/layout.styl
View File

@@ -1,11 +1,16 @@
@import 'mixin.styl'
@import 'iconfont.styl'
.state_0
background center / 100% 100% url('../images/state_0.png') no-repeat
.state_1
background center / 100% 100% url('../images/state_1.png') no-repeat
.state_2
background center / 100% 100% url('../images/state_2.png') no-repeat
.state_3
background center / 100% 100% url('../images/state_3.png') no-repeat
.header_select
width 200px
.el-input__inner
padding-left 38px
font-size: 19px;
font-weight: 700;
color: #fff;
text-align: center;
letter-spacing: 3px;
background-color: transparent;
border: none;
.el-select__caret
color: transparent !important

4
src/style/reset.css
View File

@@ -147,6 +147,10 @@ div, p {
align-items: flex-start !important;
}
.aligncenter {
align-content: center !important;
}
.jcflexstart {
justify-content: flex-start !important;
}

10
src/vuex/modules/com.js
View File

@@ -1,32 +1,36 @@
import * as types from '../types'
import { getStore, setStore } from '@js/mUtils.js'
const baseUrl = process.env.NODE_ENV === 'development' ? 'http://192.168.200.220:8010' : 'http://192.168.200.220:8010'
const baseUrl = process.env.NODE_ENV === 'development' ? 'http://192.168.10.46:8018' : 'http://192.168.10.46:8018'
/**
* App通用配置
*/
const state = {
baseUrl: getStore('baseUrl') || baseUrl,
setTime: getStore('setTime') || 10000
setTime: getStore('setTime') || 10000,
pageNo: getStore('pageNo') || 1
}
const actions = {
setConfig ({commit}, res) {
setStore('baseUrl', res.baseUrl)
setStore('setTime', res.setTime)
setStore('pageNo', res.pageNo)
commit(types.COM_CONFIG, res)
}
}
const getters = {
baseUrl: state => state.baseUrl,
setTime: state => state.setTime
setTime: state => state.setTime,
pageNo: state => state.pageNo
}
const mutations = {
[types.COM_CONFIG] (state, res) {
state.baseUrl = res.baseUrl
state.setTime = res.setTime
state.pageNo = res.pageNo
}
}