36 changed files with 32274 additions and 0 deletions
@ -0,0 +1,5 @@ |
|||||
|
node_modules |
||||
|
dist |
||||
|
.idea |
||||
|
.vscode/launch.json |
||||
|
|
||||
@ -0,0 +1,16 @@ |
|||||
|
module.exports = { |
||||
|
presets: [ |
||||
|
'@vue/cli-plugin-babel/preset' |
||||
|
], |
||||
|
"plugins": [ |
||||
|
[ |
||||
|
"import", |
||||
|
{ |
||||
|
"libraryName": "vant", |
||||
|
"libraryDirectory": "es", |
||||
|
"style": true |
||||
|
}, |
||||
|
"vant" |
||||
|
] |
||||
|
] |
||||
|
} |
||||
File diff suppressed because it is too large
@ -0,0 +1,58 @@ |
|||||
|
{ |
||||
|
"name": "wmslargescreen", |
||||
|
"version": "2.0.0", |
||||
|
"private": true, |
||||
|
"scripts": { |
||||
|
"dev": "vue-cli-service serve", |
||||
|
"serve": "vue-cli-service serve", |
||||
|
"build": "vue-cli-service build", |
||||
|
"lint": "vue-cli-service lint" |
||||
|
}, |
||||
|
"dependencies": { |
||||
|
"@jiaminghi/data-view": "^2.10.0", |
||||
|
"axios": "^0.21.1", |
||||
|
"core-js": "^3.6.5", |
||||
|
"echarts": "^5.4.0", |
||||
|
"element-ui": "2.15.13", |
||||
|
"js-cookie": "^3.0.1", |
||||
|
"postcss-px-to-viewport": "^1.1.1", |
||||
|
"quill": "^1.3.7", |
||||
|
"quill-emoji": "^0.2.0", |
||||
|
"svg-sprite-loader": "^6.0.11", |
||||
|
"vue": "^2.6.11", |
||||
|
"vue-quill-editor": "^3.0.6", |
||||
|
"vue-router": "^3.2.0", |
||||
|
"vue-video-player": "^5.0.2" |
||||
|
}, |
||||
|
"devDependencies": { |
||||
|
"@vue/cli-plugin-babel": "~4.5.0", |
||||
|
"@vue/cli-plugin-eslint": "~4.5.0", |
||||
|
"@vue/cli-plugin-router": "^4.5.13", |
||||
|
"@vue/cli-service": "~4.5.0", |
||||
|
"babel-eslint": "^10.1.0", |
||||
|
"babel-plugin-import": "^1.13.3", |
||||
|
"eslint": "^6.7.2", |
||||
|
"eslint-plugin-vue": "^6.2.2", |
||||
|
"less-loader": "^7.3.0", |
||||
|
"vue-template-compiler": "^2.6.11" |
||||
|
}, |
||||
|
"eslintConfig": { |
||||
|
"root": true, |
||||
|
"env": { |
||||
|
"node": true |
||||
|
}, |
||||
|
"extends": [ |
||||
|
"plugin:vue/essential", |
||||
|
"eslint:recommended" |
||||
|
], |
||||
|
"parserOptions": { |
||||
|
"parser": "babel-eslint" |
||||
|
}, |
||||
|
"rules": {} |
||||
|
}, |
||||
|
"browserslist": [ |
||||
|
"> 1%", |
||||
|
"last 2 versions", |
||||
|
"not dead" |
||||
|
] |
||||
|
} |
||||
|
After Width: | Height: | Size: 1.6 KiB |
@ -0,0 +1 @@ |
|||||
|
window.SITE_CONFIG['apiURL'] = 'http://dev.ccwin-in.com:60087' |
||||
@ -0,0 +1,27 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang=""> |
||||
|
<head> |
||||
|
<meta charset="utf-8"> |
||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||||
|
<!-- <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> --> |
||||
|
<!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> --> |
||||
|
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> --> |
||||
|
<!-- <meta name="x5-fullscreen" content="true"> --> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"> |
||||
|
<!-- <meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1"> --> |
||||
|
<link rel="icon" href="<%= BASE_URL %>WMS.svg"> |
||||
|
<title><%= htmlWebpackPlugin.options.title %></title> |
||||
|
</head> |
||||
|
<body> |
||||
|
<script> |
||||
|
window.SITE_CONFIG = {}; |
||||
|
window.SITE_CONFIG['apiURL'] = '';// api请求地址 |
||||
|
</script> |
||||
|
<script src="./config.js"></script> |
||||
|
<noscript> |
||||
|
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> |
||||
|
</noscript> |
||||
|
<div id="app"></div> |
||||
|
<!-- built files will be auto injected --> |
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,21 @@ |
|||||
|
<template> |
||||
|
<div id="app"> |
||||
|
<router-view/> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<style> |
||||
|
html, body { |
||||
|
margin: 0; |
||||
|
height: 100%; |
||||
|
} |
||||
|
#app { |
||||
|
font-family: Avenir, Helvetica, Arial, sans-serif; |
||||
|
-webkit-font-smoothing: antialiased; |
||||
|
-moz-osx-font-smoothing: grayscale; |
||||
|
text-align: center; |
||||
|
color: #2c3e50; |
||||
|
height: 100%; |
||||
|
user-select: none; |
||||
|
} |
||||
|
</style> |
||||
|
After Width: | Height: | Size: 715 KiB |
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 135 KiB |
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 6.7 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
@ -0,0 +1,10 @@ |
|||||
|
import Vue from "vue" |
||||
|
import SvgIcon from "@/components/svgIcon" |
||||
|
Vue.component('svg-icon', SvgIcon) |
||||
|
|
||||
|
const req = require.context('@/assets/svg/icons',false,/\.svg$/) |
||||
|
const requireAll = requireContext =>{ |
||||
|
// requireContext.keys()数据：['./404.svg', './agency.svg', './det.svg', './user.svg']
|
||||
|
requireContext.keys().map(requireContext) |
||||
|
} |
||||
|
requireAll(req) |
||||
@ -0,0 +1,95 @@ |
|||||
|
<template> |
||||
|
<div class="boardHeader"> |
||||
|
<!-- <a href="/" class="back"><i class="el-icon-arrow-left"></i>返回</a> --> |
||||
|
<div class="title">{{name}}</div> |
||||
|
<div class="time">{{time}}</div> |
||||
|
<div class="dateSelect" v-if="hasDateSelect"> |
||||
|
<el-date-picker |
||||
|
v-model="dateValue" |
||||
|
type="date" |
||||
|
placeholder="选择日期" |
||||
|
@change="dateSelectChange" |
||||
|
value-format="yyyy-MM-dd" |
||||
|
:picker-options="pickerOptions" |
||||
|
></el-date-picker> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import dateUtil from '../../utils/dateUtil' |
||||
|
import axiosUtil from '../../utils/request' |
||||
|
export default { |
||||
|
name: 'boardHeader', |
||||
|
props:['title','timeCheck','hasDateSelect'], |
||||
|
data (props) { |
||||
|
const defaultDateOption = { |
||||
|
disabledDate(time) { |
||||
|
// 包括今天往前包含7天 |
||||
|
let _current = new Date().getTime()//当前时间戳 |
||||
|
let _before = _current - 7 * 24 * 60 * 60 * 1000//7天前的时间戳 |
||||
|
let _time = time.getTime() //time日期时间戳 |
||||
|
return !(_time >= _before && _time <= _current) |
||||
|
}, |
||||
|
} |
||||
|
return { |
||||
|
name:props.title, |
||||
|
time:"", |
||||
|
timer:null, |
||||
|
timeCheckHandle:props.timeCheck, |
||||
|
dateValue:'',//选择时间 |
||||
|
pickerOptions:props.selectDataOptions || defaultDateOption |
||||
|
} |
||||
|
}, |
||||
|
destroyed() { |
||||
|
if(this.timer)clearInterval(this.timer) |
||||
|
}, |
||||
|
created() { |
||||
|
// 当前时间获取服务器处理 |
||||
|
this.getServerTime() |
||||
|
}, |
||||
|
methods:{ |
||||
|
// 获取服务器当前时间 |
||||
|
getServerTime(){ |
||||
|
let _this=this |
||||
|
dateUtil.getServerTime((date,time,dateTime,res)=>{ |
||||
|
this.dateValue = dateUtil.getnowDay(date) |
||||
|
this.timer = setInterval(() => { |
||||
|
let _res = res |
||||
|
if(this.timeCheckHandle)this.timeCheckHandle(res) |
||||
|
_res += 1000 |
||||
|
_this.time = dateUtil.getnowDay(_res) + ' ' + dateUtil.getnowTime(_res) |
||||
|
// // 零点重新获取处理 |
||||
|
let _time = dateUtil.getnowTime(_res) |
||||
|
if(_time == '00:00:00' || _time == '0:00:00'){ |
||||
|
location.reload() |
||||
|
} |
||||
|
}, 1000) |
||||
|
}) |
||||
|
// axiosUtil.ajax_get('/api/dashboard/asn-time-window/get-server-date-time').then(res => { |
||||
|
// let _res = new Date(res).getTime() |
||||
|
// this.timer = setInterval(() => { |
||||
|
// if(this.timeCheckHandle)this.timeCheckHandle(res) |
||||
|
// _res += 1000 |
||||
|
// _this.time = dateUtil.getnowDay(_res) + ' ' + dateUtil.getnowTime(_res) |
||||
|
// // 零点重新获取处理 |
||||
|
// let _time = dateUtil.getnowTime(_res) |
||||
|
// if(_time == '00:00:00' || _time == '0:00:00'){ |
||||
|
// location.reload() |
||||
|
// } |
||||
|
// }, 1000) |
||||
|
// }).catch(error => { |
||||
|
// this.$message({ |
||||
|
// message: "获取服务器时间异常", |
||||
|
// type: "error", |
||||
|
// }); |
||||
|
// console.log(error) |
||||
|
// }) |
||||
|
}, |
||||
|
// 时间更改操作 |
||||
|
dateSelectChange(value){ |
||||
|
this.$emit('headerDateChange',value) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,91 @@ |
|||||
|
<template> |
||||
|
<div class="lineLightContain-outer" :class="lineClass"> |
||||
|
<div class="lineLightContain"> |
||||
|
<img src="../../assets/img/light-row.png" class="line top"> |
||||
|
<img src="../../assets/img/light-col.png" class="line right"> |
||||
|
<img src="../../assets/img/light-row.png" class="line bottom"> |
||||
|
<img src="../../assets/img/light-col.png" class="line left"> |
||||
|
<slot></slot> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'lineLightContain', |
||||
|
props:{ |
||||
|
lineClass:String |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped lang="less"> |
||||
|
@border_size:0.2rem; |
||||
|
@line_size:0.15rem; |
||||
|
@boxTitle_height:2.3rem; |
||||
|
// 边框-亮边 |
||||
|
.lineLightContain-outer{ |
||||
|
width: calc(100% - 2*@border_size); |
||||
|
height: calc(100% - 2*@border_size); |
||||
|
box-sizing: border-box; |
||||
|
overflow: hidden; |
||||
|
position: relative; |
||||
|
} |
||||
|
.lineLightContain{ |
||||
|
height: 100%; |
||||
|
width: 100%; |
||||
|
border: #1d36b3 solid @border_size; |
||||
|
border-radius: 0.2rem; |
||||
|
background: rgba(0, 15, 80, 0.48); |
||||
|
padding: 1rem 1.2rem; |
||||
|
box-sizing: border-box; |
||||
|
|
||||
|
.box-title{ |
||||
|
position: relative; |
||||
|
color: #31ceff; |
||||
|
// font-style: italic; |
||||
|
letter-spacing: 0.05rem; |
||||
|
font-size: 1rem; |
||||
|
height: @boxTitle_height; |
||||
|
overflow: hidden; |
||||
|
text-align: left; |
||||
|
|
||||
|
.name{ |
||||
|
padding-left: 0.4rem; |
||||
|
} |
||||
|
|
||||
|
.svg-icon { |
||||
|
position: absolute; |
||||
|
width: 6rem; |
||||
|
height: 0.4rem; |
||||
|
font-size: unset; |
||||
|
left: 0; |
||||
|
bottom: 0; |
||||
|
text-align: left; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.line{ |
||||
|
position: absolute; |
||||
|
&.top{ |
||||
|
height: @line_size; |
||||
|
right: 20%; |
||||
|
top: 0; |
||||
|
} |
||||
|
&.right{ |
||||
|
width: @line_size; |
||||
|
right: 0; |
||||
|
bottom: 20%; |
||||
|
} |
||||
|
&.bottom{ |
||||
|
height: @line_size; |
||||
|
left: 20%; |
||||
|
bottom: 0; |
||||
|
} |
||||
|
&.left{ |
||||
|
width: @line_size; |
||||
|
left: 0; |
||||
|
top: 20%; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,28 @@ |
|||||
|
<template> |
||||
|
<i v-if="iconFileName.indexOf('el-icon-') === 0" :class="iconFileName" /> |
||||
|
<svg v-else class="svg-icon" aria-hidden="true" v-on="$listeners"> |
||||
|
<use :xlink:href="`#icon-${iconFileName}`" /> |
||||
|
</svg> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'SvgIcon', |
||||
|
props: { |
||||
|
iconFileName: { |
||||
|
type: String, |
||||
|
required: true |
||||
|
} |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
/* .svg-icon { |
||||
|
width: 1em; |
||||
|
height: 1em; |
||||
|
overflow: hidden; |
||||
|
vertical-align: -0.15em; |
||||
|
fill: currentColor; |
||||
|
} */ |
||||
|
</style> |
||||
@ -0,0 +1,20 @@ |
|||||
|
|
||||
|
import Vue from 'vue' |
||||
|
import App from './App.vue' |
||||
|
|
||||
|
import router from './router' |
||||
|
import './styles/index.css' |
||||
|
import dataV from '@jiaminghi/data-view' |
||||
|
import ElementUI from 'element-ui'; |
||||
|
import 'element-ui/lib/theme-chalk/index.css'; |
||||
|
import './assets/svg/index' |
||||
|
|
||||
|
Vue.use(dataV) |
||||
|
Vue.use(ElementUI); |
||||
|
|
||||
|
Vue.config.productionTip = false |
||||
|
|
||||
|
new Vue({ |
||||
|
router, |
||||
|
render: h => h(App) |
||||
|
}).$mount('#app') |
||||
@ -0,0 +1,81 @@ |
|||||
|
import Vue from 'vue' |
||||
|
import VueRouter from 'vue-router' |
||||
|
import Home from '../views/Home.vue' |
||||
|
import planAndActualBoard from '../views/planAndActualBoard' |
||||
|
import logisticsTimeBoard from '../views/logisticsTimeBoard' |
||||
|
import warehouseBoard from '../views/warehouseBoard' |
||||
|
import arrivalBoard from '../views/arrivalBoard' |
||||
|
import dateUtil from '../utils/dateUtil' |
||||
|
|
||||
|
Vue.use(VueRouter) |
||||
|
|
||||
|
const routes = [ |
||||
|
{ |
||||
|
path: '/', |
||||
|
name: 'Home', |
||||
|
component: Home |
||||
|
}, |
||||
|
// 纳入计划与实际看板
|
||||
|
{ |
||||
|
path: '/planAndActualBoard', |
||||
|
name: 'planAndActualBoard', |
||||
|
component: planAndActualBoard, |
||||
|
meta:{ |
||||
|
title:"纳入计划与实际看板" |
||||
|
} |
||||
|
}, |
||||
|
// 物流时刻目视表
|
||||
|
{ |
||||
|
path: '/logisticsTimeBoard', |
||||
|
name: 'logisticsTimeBoard', |
||||
|
component: logisticsTimeBoard, |
||||
|
meta:{ |
||||
|
title:"物流时刻目视表" |
||||
|
} |
||||
|
}, |
||||
|
// 库房信息指示屏
|
||||
|
{ |
||||
|
path: '/warehouseBoard', |
||||
|
name: 'warehouseBoard', |
||||
|
component: warehouseBoard, |
||||
|
meta:{ |
||||
|
title:"库房信息指示屏" |
||||
|
} |
||||
|
}, |
||||
|
// 到货信息指示屏
|
||||
|
{ |
||||
|
path: '/arrivalBoard', |
||||
|
name: 'arrivalBoard', |
||||
|
component: arrivalBoard, |
||||
|
meta:{ |
||||
|
title:"到货信息指示屏" |
||||
|
} |
||||
|
}, |
||||
|
] |
||||
|
|
||||
|
const router = new VueRouter({ |
||||
|
routes |
||||
|
}) |
||||
|
|
||||
|
router.beforeEach((to, from, next) => { |
||||
|
console.log('router.beforeEach',to) |
||||
|
/* 路由发生变化修改页面title */ |
||||
|
if (to.meta.title) { |
||||
|
document.title = to.meta.title |
||||
|
} |
||||
|
if(to.meta.content){ |
||||
|
let head = document.getElementsByTagName('head'); |
||||
|
let metas = document.getElementsByTagName('meta'); |
||||
|
for (let i = 0; i < metas.length; i++) { |
||||
|
if (metas[i].name === 'viewport') { |
||||
|
metas[i].content += ', ' + to.meta.content |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
// 获取服务器当前时间
|
||||
|
dateUtil.getServerTime((date,time,dateTime,res)=>{ |
||||
|
next() |
||||
|
}) |
||||
|
}) |
||||
|
|
||||
|
export default router |
||||
@ -0,0 +1,175 @@ |
|||||
|
.dv-loading { |
||||
|
color: #fff; |
||||
|
margin-top: -6rem; |
||||
|
} |
||||
|
.opacityHide { |
||||
|
opacity: 0; |
||||
|
} |
||||
|
.boardHeader { |
||||
|
position: relative; |
||||
|
line-height: 6rem; |
||||
|
height: 6rem; |
||||
|
overflow: hidden; |
||||
|
background: url(../assets/img/bg-title.png) no-repeat; |
||||
|
background-size: 100% 6rem; |
||||
|
background-position: bottom center; |
||||
|
} |
||||
|
.boardHeader .title { |
||||
|
font-size: 1.4rem; |
||||
|
font-style: italic; |
||||
|
letter-spacing: 0.3rem; |
||||
|
color: #fff; |
||||
|
line-height: 1.4rem; |
||||
|
padding-top: 1.6rem; |
||||
|
} |
||||
|
.boardHeader .time { |
||||
|
font-size: 1.1rem; |
||||
|
color: #fff; |
||||
|
line-height: 4.2rem; |
||||
|
} |
||||
|
.boardHeader .dateSelect { |
||||
|
position: absolute; |
||||
|
left: 2rem; |
||||
|
top: 0.5rem; |
||||
|
} |
||||
|
.boardHeader .dateSelect .el-input__inner { |
||||
|
background: transparent !important; |
||||
|
border-color: #1d36b3 !important; |
||||
|
color: #fff !important; |
||||
|
} |
||||
|
.boardFullPage { |
||||
|
position: fixed; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
top: 0; |
||||
|
bottom: 0; |
||||
|
background: url('../assets/img/bg-page.png') no-repeat; |
||||
|
background-size: cover; |
||||
|
background-position: bottom center; |
||||
|
} |
||||
|
.lineContain { |
||||
|
border: #1d36b3 solid 0.2rem; |
||||
|
border-radius: 1rem; |
||||
|
overflow: hidden; |
||||
|
background: rgba(0, 15, 80, 0.5); |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
.hasNoData { |
||||
|
position: absolute; |
||||
|
top: 40%; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
color: #fff; |
||||
|
font-size: 1.1rem; |
||||
|
} |
||||
|
.doubleNameTagHeader { |
||||
|
width: 100%; |
||||
|
position: relative; |
||||
|
height: 100%; |
||||
|
line-height: 2rem; |
||||
|
} |
||||
|
.doubleNameTagHeader .name { |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
bottom: 0; |
||||
|
} |
||||
|
.doubleNameTagHeader .time { |
||||
|
position: absolute; |
||||
|
right: 0; |
||||
|
top: 0; |
||||
|
} |
||||
|
.doubleNameTagHeader .line { |
||||
|
position: absolute; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
.doubleNameTagHeader .line::before { |
||||
|
content: ""; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
top: 2rem; |
||||
|
width: 100%; |
||||
|
box-sizing: border-box; |
||||
|
border-bottom: 0.1rem solid #fff; |
||||
|
transform-origin: bottom center; |
||||
|
transform: rotate(10deg); |
||||
|
} |
||||
|
.chartContain { |
||||
|
display: flex; |
||||
|
height: calc(46vh - 6rem); |
||||
|
justify-content: space-around; |
||||
|
padding-top: 1rem; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
.chartContain .oneRow { |
||||
|
display: flex; |
||||
|
width: calc(50% - 2rem); |
||||
|
margin: 0 0.5rem; |
||||
|
} |
||||
|
.chartContain .oneRow .totalContain { |
||||
|
background: url(../assets/img/bg-title-top.png) no-repeat; |
||||
|
background-position: top center; |
||||
|
display: flex; |
||||
|
} |
||||
|
.chartContain .oneRow .totalContain .box { |
||||
|
height: calc(100% - 6rem); |
||||
|
margin-right: 1rem; |
||||
|
overflow: hidden; |
||||
|
align-self: end; |
||||
|
min-height: 12rem; |
||||
|
} |
||||
|
.chartContain .oneRow .totalContain .box .lineLightContain { |
||||
|
width: 15rem; |
||||
|
flex-shrink: 0; |
||||
|
color: #43caff; |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
align-content: center; |
||||
|
} |
||||
|
.chartContain .oneRow .totalContain .box .icon { |
||||
|
width: 100%; |
||||
|
} |
||||
|
.chartContain .oneRow .totalContain .box .icon .svg-icon { |
||||
|
width: 5rem; |
||||
|
height: 5rem; |
||||
|
overflow: hidden; |
||||
|
vertical-align: -0.15em; |
||||
|
fill: currentColor; |
||||
|
} |
||||
|
.chartContain .oneRow .totalContain .box .val { |
||||
|
width: 100%; |
||||
|
font-size: 2rem; |
||||
|
padding: 5% 0; |
||||
|
} |
||||
|
.chartContain .oneRow .totalContain .box .name { |
||||
|
width: 100%; |
||||
|
font-size: 1rem; |
||||
|
} |
||||
|
.chartContain .oneRow .chartBox { |
||||
|
position: relative; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
.chartContain .oneRow .chartBox .myEchart { |
||||
|
width: 100%; |
||||
|
height: calc(100% - 2.3rem); |
||||
|
margin: 0 auto; |
||||
|
} |
||||
|
.chartContain .oneRow .chartBox .echatCenterDataSum { |
||||
|
position: absolute; |
||||
|
top: calc(50% + 2.3rem / 2); |
||||
|
left: 50%; |
||||
|
transform: translate(-50%, -50%); |
||||
|
-webkit-transform: translate(-50%, -50%); |
||||
|
text-align: center; |
||||
|
color: #fff; |
||||
|
z-index: 1111; |
||||
|
} |
||||
|
.chartContain .oneRow .chartBox .echatCenterDataSum p { |
||||
|
margin: 0; |
||||
|
} |
||||
|
.chartContain .oneRow .chartBox .echatCenterDataSum .sum { |
||||
|
font-size: 1.6rem; |
||||
|
padding-top: 0.3rem; |
||||
|
} |
||||
@ -0,0 +1,200 @@ |
|||||
|
@header_height:6rem; |
||||
|
@border_size:0.2rem; |
||||
|
@boxTitle_height:2.3rem; |
||||
|
.dv-loading{ |
||||
|
color: #fff; |
||||
|
margin-top: -@header_height; |
||||
|
} |
||||
|
// 模拟隐藏 |
||||
|
.opacityHide{ |
||||
|
opacity: 0; |
||||
|
} |
||||
|
// 头部 |
||||
|
.boardHeader{ |
||||
|
position: relative; |
||||
|
line-height: @header_height; |
||||
|
height: @header_height; |
||||
|
overflow: hidden; |
||||
|
background: url(../assets/img/bg-title.png) no-repeat; |
||||
|
background-size: 100% 6rem; |
||||
|
background-position: bottom center; |
||||
|
.title{ |
||||
|
font-size: 1.4rem; |
||||
|
font-style: italic; |
||||
|
letter-spacing: 0.3rem; |
||||
|
color: #fff; |
||||
|
line-height: 1.4rem; |
||||
|
padding-top: 1.6rem; |
||||
|
} |
||||
|
.time{ |
||||
|
font-size: 1.1rem; |
||||
|
color: #fff; |
||||
|
line-height: 4.2rem; |
||||
|
} |
||||
|
.dateSelect{ |
||||
|
position: absolute; |
||||
|
left: 2rem; |
||||
|
top: 0.5rem; |
||||
|
|
||||
|
.el-input__inner{ |
||||
|
background: transparent !important; |
||||
|
border-color: #1d36b3 !important; |
||||
|
color: #fff !important; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
// 页面 |
||||
|
.boardFullPage{ |
||||
|
position: fixed; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
top: 0; |
||||
|
bottom: 0; |
||||
|
background: url('../assets/img/bg-page.png') no-repeat; |
||||
|
background-size: cover; |
||||
|
background-position: bottom center; |
||||
|
} |
||||
|
// 边框 |
||||
|
.lineContain{ |
||||
|
border: #1d36b3 solid @border_size; |
||||
|
border-radius: 1rem; |
||||
|
overflow: hidden; |
||||
|
// background: rgba(0, 44, 81, 0.9); |
||||
|
background: rgba(0, 15, 80, 0.5); |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
// 暂无信息 |
||||
|
.hasNoData{ |
||||
|
position: absolute; |
||||
|
top: 40%; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
color: #fff; |
||||
|
font-size: 1.1rem; |
||||
|
} |
||||
|
|
||||
|
// 表格双头部（如：物流时刻表，左上） |
||||
|
.doubleNameTagHeader{ |
||||
|
width: 100%; |
||||
|
position: relative; |
||||
|
height:100%; |
||||
|
line-height: 2rem; |
||||
|
.name{ |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
bottom: 0; |
||||
|
} |
||||
|
.time{ |
||||
|
position: absolute; |
||||
|
right: 0; |
||||
|
top: 0; |
||||
|
} |
||||
|
.line{ |
||||
|
position:absolute; |
||||
|
width:100%; |
||||
|
height:100%; |
||||
|
box-sizing:border-box; |
||||
|
// line-height:120px; |
||||
|
// text-indent:5px; |
||||
|
|
||||
|
&::before{ |
||||
|
content:""; |
||||
|
position:absolute; |
||||
|
left:0; |
||||
|
top:2rem; |
||||
|
width:100%; |
||||
|
// height:44%; |
||||
|
box-sizing:border-box; |
||||
|
border-bottom:0.1rem solid #fff; |
||||
|
transform-origin:bottom center; |
||||
|
transform: rotate(10deg); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
// 图表内容 |
||||
|
.chartContain{ |
||||
|
display: flex; |
||||
|
height: calc(46vh - @header_height); |
||||
|
justify-content: space-around; |
||||
|
padding-top: 1rem; |
||||
|
box-sizing: border-box; |
||||
|
.oneRow{ |
||||
|
display: flex; |
||||
|
width: calc(50% - 2rem); |
||||
|
margin: 0 0.5rem; |
||||
|
// 左侧汇总 |
||||
|
.totalContain{ |
||||
|
background: url(../assets/img/bg-title-top.png) no-repeat; |
||||
|
background-position: top center; |
||||
|
display: flex; |
||||
|
.box{ |
||||
|
height: calc(100% - 6rem); |
||||
|
margin-right: 1rem; |
||||
|
overflow: hidden; |
||||
|
align-self: end; |
||||
|
min-height: 12rem; |
||||
|
|
||||
|
.lineLightContain{ |
||||
|
width: 15rem; |
||||
|
flex-shrink: 0; |
||||
|
color: #43caff; |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
align-content: center; |
||||
|
} |
||||
|
.icon{ |
||||
|
width: 100%; |
||||
|
.svg-icon { |
||||
|
width: 5rem; |
||||
|
height: 5rem; |
||||
|
overflow: hidden; |
||||
|
vertical-align: -0.15em; |
||||
|
fill: currentColor; |
||||
|
} |
||||
|
} |
||||
|
.val{ |
||||
|
width: 100%; |
||||
|
font-size: 2rem; |
||||
|
padding: 5% 0; |
||||
|
} |
||||
|
.name{ |
||||
|
width: 100%; |
||||
|
font-size:1rem; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
// 右侧图表 |
||||
|
.chartBox{ |
||||
|
position: relative; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
.myEchart{ |
||||
|
width: 100%; |
||||
|
height: calc(100% - @boxTitle_height); |
||||
|
margin: 0 auto; |
||||
|
} |
||||
|
|
||||
|
// echart中间汇总数 |
||||
|
.echatCenterDataSum{ |
||||
|
position: absolute; |
||||
|
top: calc(50% + @boxTitle_height / 2); |
||||
|
left: 50%; |
||||
|
transform:translate(-50%,-50%); |
||||
|
-webkit-transform:translate(-50%,-50%); |
||||
|
text-align: center; |
||||
|
color: #fff; |
||||
|
z-index: 1111; |
||||
|
|
||||
|
p{ |
||||
|
margin: 0; |
||||
|
} |
||||
|
|
||||
|
.sum{ |
||||
|
font-size: 1.6rem; |
||||
|
padding-top: 0.3rem; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,59 @@ |
|||||
|
import axiosUtil from '../utils/request' |
||||
|
|
||||
|
var getAgoDay = function (n){ |
||||
|
let date = new Date() |
||||
|
let seperator = '-' |
||||
|
let newDate = new Date(date.getTime() - n*24*60*60*1000) |
||||
|
let year = newDate.getFullYear() |
||||
|
let month = newDate.getMonth()+1 |
||||
|
let day = newDate.getDate() |
||||
|
return year.toString() + seperator + month.toString() + seperator + day.toString() |
||||
|
} |
||||
|
|
||||
|
var getnowDay = function (){ |
||||
|
let date = new Date() |
||||
|
let seperator = '-' |
||||
|
let newDate = new Date(date.getTime()) |
||||
|
let year = newDate.getFullYear() |
||||
|
let month = newDate.getMonth()+1 |
||||
|
let day = newDate.getDate() |
||||
|
return year.toString() + seperator + month.toString() + seperator + day.toString() |
||||
|
} |
||||
|
|
||||
|
var getnowTime = function (){ |
||||
|
let date = new Date() |
||||
|
let seperator = ':' |
||||
|
let newDate = new Date(date.getTime()) |
||||
|
function __formatLength(value){ |
||||
|
if(Number(value) < 10){ |
||||
|
return "0"+value |
||||
|
}else{ |
||||
|
return value |
||||
|
} |
||||
|
} |
||||
|
let hour = __formatLength(newDate.getHours()); |
||||
|
let minute = __formatLength(newDate.getMinutes()); |
||||
|
let second = __formatLength(newDate.getSeconds()); |
||||
|
return hour.toString() + seperator + minute.toString() + seperator + second.toString() |
||||
|
} |
||||
|
|
||||
|
|
||||
|
var getServerTime = function (callback){ |
||||
|
axiosUtil.ajax_get('/api/dashboard/asn-time-window/get-server-date-time').then(res => { |
||||
|
let _res = new Date(res).getTime() |
||||
|
let date = getnowDay(_res) |
||||
|
let time = getnowTime(_res) |
||||
|
let datetime = date + ' ' + time |
||||
|
if(callback)callback(date,time,datetime,_res,res) |
||||
|
localStorage.setItem('currentServerDate', date); |
||||
|
}).catch(error => { |
||||
|
console.log(error) |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
export default { |
||||
|
getAgoDay: getAgoDay, // 获取当前天前几天
|
||||
|
getnowDay: getnowDay, // 获取当前时间 yyyy-dd-mm
|
||||
|
getnowTime: getnowTime, // 获取当前时间 hh:mm:ss
|
||||
|
getServerTime:getServerTime,// 获取服务器时间 走接口
|
||||
|
} |
||||
@ -0,0 +1,60 @@ |
|||||
|
import axios from 'axios' |
||||
|
import qs from "querystring"; |
||||
|
|
||||
|
// http request拦截器 添加一个请求拦截器
|
||||
|
axios.interceptors.request.use(function (config) { |
||||
|
// Do something before request is sent
|
||||
|
let token = localStorage.getItem('token') //window.localStorage.getItem("accessToken")
|
||||
|
if (token) { |
||||
|
config.headers.token = token; //将token放到请求头发送给服务器
|
||||
|
return config; |
||||
|
//这里经常搭配token使用，将token值配置到tokenkey中，将tokenkey放在请求头中
|
||||
|
// config.headers['accessToken'] = Token;
|
||||
|
} |
||||
|
return config |
||||
|
}, function (error) { |
||||
|
// Do something with request error
|
||||
|
return Promise.reject(error); |
||||
|
}); |
||||
|
|
||||
|
// // 添加一个响应拦截器
|
||||
|
// axios.interceptors.response.use(function (response) {
|
||||
|
// // Do something with response data
|
||||
|
// return response;
|
||||
|
// }, function (error) {
|
||||
|
// // Do something with response error
|
||||
|
// return Promise.reject(error);
|
||||
|
// });
|
||||
|
|
||||
|
//是我封装的axios.post请求方式
|
||||
|
const baseApi = window.SITE_CONFIG['apiURL'] |
||||
|
export default class Axios { |
||||
|
static ajax_post(url, params ) { |
||||
|
return new Promise((resolve, reject) => { |
||||
|
const URL = baseApi + url |
||||
|
return axios.post(URL, qs.stringify(params)).then(response => { |
||||
|
resolve(response.data); |
||||
|
return response.data |
||||
|
}).catch(error => { |
||||
|
reject(error); |
||||
|
return error |
||||
|
// 异常处理
|
||||
|
}) |
||||
|
}) |
||||
|
} |
||||
|
static ajax_get(url, param ) { |
||||
|
return new Promise((resolve, reject) => { |
||||
|
const URL = baseApi + url |
||||
|
return axios.get(URL, { |
||||
|
params: param, |
||||
|
}).then(response => { |
||||
|
resolve(response.data); |
||||
|
return response.data |
||||
|
}).catch(error => { |
||||
|
reject(error); |
||||
|
return error |
||||
|
// 异常处理
|
||||
|
}) |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,10 @@ |
|||||
|
// 窗口改变，页面刷新
|
||||
|
var addEventResizeFlesh = function(){ |
||||
|
window.addEventListener('resize',function(){ |
||||
|
window.location.reload() |
||||
|
}) |
||||
|
} |
||||
|
export default { |
||||
|
waitTime:20000,//滚屏列表刷新等待间隔配置项
|
||||
|
addEventResizeFlesh:addEventResizeFlesh, |
||||
|
} |
||||
@ -0,0 +1,33 @@ |
|||||
|
<template> |
||||
|
<div class="nav"> |
||||
|
<div class="item"><el-button type="primary" plain><a href="/#/planAndActualBoard">纳入计划与实际看板</a></el-button></div> |
||||
|
<div class="item"><el-button type="warning" plain><a href="/#/logisticsTimeBoard">物流时刻目视表</a></el-button></div> |
||||
|
<div class="item"><el-button type="success" plain><a href="/#/warehouseBoard">库房信息指示屏</a></el-button></div> |
||||
|
<div class="item"><el-button type="danger" plain><a href="/#/arrivalBoard">到货信息指示屏</a></el-button></div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'largeScreen', |
||||
|
data () { |
||||
|
return {} |
||||
|
}, |
||||
|
methods: {} |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="less" scoped> |
||||
|
.nav{ |
||||
|
padding-top: 1rem; |
||||
|
.item{ |
||||
|
margin: 0 auto 1rem; |
||||
|
button{ |
||||
|
width: 20rem; |
||||
|
} |
||||
|
a{ |
||||
|
display: block; |
||||
|
color: inherit; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,590 @@ |
|||||
|
<template> |
||||
|
<div class="boardFullPage"> |
||||
|
<boardHeader |
||||
|
:title="'到货信息指示屏'" |
||||
|
@headerDateChange="headerDateChange" |
||||
|
></boardHeader> |
||||
|
<dv-loading v-show="dataLoading">Loading...</dv-loading> |
||||
|
<div class="chartContain"> |
||||
|
<div class="oneRow"> |
||||
|
<div class="totalContain"> |
||||
|
<lineLightContain :lineClass="'box'"> |
||||
|
<template> |
||||
|
<div class="icon"><svg-icon icon-file-name="noput"/></div> |
||||
|
<div class="val">{{leftSumQty || leftSumQty == 0 ? leftSumQty : "—"}}</div> |
||||
|
<!-- <div class="val">4260</div> --> |
||||
|
<div class="name">未上架数量</div> |
||||
|
</template> |
||||
|
</lineLightContain> |
||||
|
</div> |
||||
|
<lineLightContain :lineClass="'chartBox'"> |
||||
|
<template> |
||||
|
<div class="box-title"><div class="name">未上架汇总</div><svg-icon icon-file-name="title-line"/></div> |
||||
|
<!-- <div v-show="leftEchatData.length > 0 && !dataLoading" id="leftTopEchart" :style="{width:'100%',height:ringSize}"></div> --> |
||||
|
<div class="myEchart" :class="[leftEchatData.length <= 0 && !dataLoading ? 'opacityHide' : '']" id="leftTopEchart"></div> |
||||
|
<div class="hasNoData" v-if="leftEchatData.length <= 0 && !dataLoading">暂无数据</div> |
||||
|
</template> |
||||
|
</lineLightContain> |
||||
|
</div> |
||||
|
<div class="oneRow"> |
||||
|
<div class="totalContain"> |
||||
|
<lineLightContain :lineClass="'box'"> |
||||
|
<template> |
||||
|
<div class="icon"><svg-icon icon-file-name="shop"/></div> |
||||
|
<div class="val">{{rightSumQty || rightSumQty == 0 ? rightSumQty : "—"}}</div> |
||||
|
<!-- <div class="val">4260</div> --> |
||||
|
<div class="name">即将到货数量</div> |
||||
|
</template> |
||||
|
</lineLightContain> |
||||
|
</div> |
||||
|
<lineLightContain :lineClass="'chartBox'"> |
||||
|
<template> |
||||
|
<div class="box-title"><div class="name">供应商未到货数量</div><svg-icon icon-file-name="title-line"/></div> |
||||
|
<!-- v-if="rightEchatData.length > 0 && !dataLoading" --> |
||||
|
<div class="echatCenterDataSum" v-if="rightEchatDataSum && rightEchatDataSum > 0 && !dataLoading"> |
||||
|
<p>汇总</p> |
||||
|
<p class="sum">{{rightEchatDataSum}}</p> |
||||
|
</div> |
||||
|
<div class="myEchart" :class="[rightEchatData.length <= 0 && !dataLoading ? 'opacityHide' : '']" id="rightRingEchart"></div> |
||||
|
<div class="hasNoData" v-if="rightEchatData.length <= 0 && !dataLoading">暂无数据</div> |
||||
|
<!-- <dv-active-ring-chart class="chart" :config="ringRightconfig" :style="{width:ringSize,height:ringSize}"/> --> |
||||
|
</template> |
||||
|
</lineLightContain> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="bottomTable"> |
||||
|
<lineLightContain :lineClass="'oneRow'"> |
||||
|
<template> |
||||
|
<div class="box-title"><div class="name">未上架明细</div><svg-icon icon-file-name="title-line"/></div> |
||||
|
<dv-scroll-board :config="tableLeftConfig" ref="arrivalLeftScrollBoard" style="height:calc(100% - 3.5rem)" /> |
||||
|
<div class="hasNoData" v-if="tableLeftConfig.data.length <= 0 && !dataLoading">暂无数据</div> |
||||
|
</template> |
||||
|
</lineLightContain> |
||||
|
<lineLightContain :lineClass="'oneRow'"> |
||||
|
<template> |
||||
|
<div class="box-title"><div class="name">未到货明细</div><svg-icon icon-file-name="title-line"/></div> |
||||
|
<!-- <dv-scroll-board :config="tableRightConfig" ref="arrivalRightScrollBoard" :style="'height:'+boardHeight" /> --> |
||||
|
<dv-scroll-board :config="tableRightConfig" ref="arrivalRightScrollBoard" style="height:calc(100% - 3.5rem)" /> |
||||
|
<div class="hasNoData" v-if="tableRightConfig.data.length <= 0 && !dataLoading">暂无数据</div> |
||||
|
</template> |
||||
|
</lineLightContain> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import axiosUtil from '../utils/request' |
||||
|
import boardHeader from '../components/boardHeader' |
||||
|
import lineLightContain from '../components/lineLightContain' |
||||
|
import util from '../utils/util' |
||||
|
import * as echarts from 'echarts' |
||||
|
export default { |
||||
|
name: 'arrivalBoard', |
||||
|
components:{boardHeader,lineLightContain}, |
||||
|
data () { |
||||
|
return { |
||||
|
// boardHeight:'800px',//滚动表格高度 |
||||
|
// ringSize:'280px',//环状图尺寸 |
||||
|
dataLoading: true, |
||||
|
leftSumQty:null,//左侧总数 |
||||
|
rightSumQty:null,//右侧总数 |
||||
|
leftEchatData:[],//左侧环状图接口数据 |
||||
|
rightEchatData:[],//右侧环状图接口数据 |
||||
|
rightEchatDataSum:null,//右侧环状图接口数据总数 |
||||
|
// 右侧环状图 |
||||
|
// ringRightconfig:{ |
||||
|
// radius:'60%', |
||||
|
// activeRadius:"65%", |
||||
|
// data:[], |
||||
|
// showOriginValue: true, |
||||
|
// // color:['#a4bee5','#09b0f6','#f08cb2','#4cd8d0','#eec130'] |
||||
|
// }, |
||||
|
configDefult:{ |
||||
|
header: ['ERP号', '描述', '供应商', '数量'], |
||||
|
data: [], |
||||
|
waitTime: util.waitTime,//每页停留20秒 |
||||
|
carousel: 'page', |
||||
|
indexHeader: '序号', |
||||
|
index: true, |
||||
|
// columnWidth: [80], |
||||
|
columnWidth: [80,250,250,250,120], |
||||
|
align: ['center','left','left','left','center'], |
||||
|
hoverPause: false, // 鼠标悬浮时，不停止轮播 |
||||
|
rowNum: 10, |
||||
|
headerBGC: '#1981f6', |
||||
|
headerHeight: 35, |
||||
|
evenRowBGC: 'rgba(0, 44, 81, 0.9)', |
||||
|
oddRowBGC: 'rgba(10, 29, 50, 0.9)' |
||||
|
}, |
||||
|
// 左侧滚动表格 |
||||
|
tableLeftConfig: {}, |
||||
|
// 右侧滚动表格 |
||||
|
tableRightConfig: {} |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
// this.boardHeight = Number(document.body.clientHeight - 460) + 'px'; |
||||
|
this.initConfig() |
||||
|
util.addEventResizeFlesh() |
||||
|
}, |
||||
|
destroyed() { |
||||
|
clearInterval(this.timer) |
||||
|
}, |
||||
|
mounted(){ |
||||
|
this.fleshAllData() |
||||
|
clearInterval(this.intervalId) |
||||
|
this.intervalId = setInterval(() => { |
||||
|
this.fleshAllData() |
||||
|
}, 600000)//十分钟获取一次数据 |
||||
|
}, |
||||
|
methods: { |
||||
|
// 刷新所有信息 |
||||
|
fleshAllData(){ |
||||
|
this.dataLoading = true |
||||
|
Promise.all([ |
||||
|
this.getSumQty("lfet"), |
||||
|
this.getSumQty("right"), |
||||
|
this.initLeftEchart(), |
||||
|
// this.initRightRingDataV(), |
||||
|
this.initRightEchart(), |
||||
|
this.getBottomList("left"), |
||||
|
this.getBottomList("right"), |
||||
|
]).then((res) => { |
||||
|
this.dataLoading = false |
||||
|
}).catch(()=>{ |
||||
|
this.dataLoading = false |
||||
|
}) |
||||
|
}, |
||||
|
// 获取左右表头数量 |
||||
|
/** |
||||
|
* right 如果有值则获取右侧数据 |
||||
|
*/ |
||||
|
getSumQty(type){ |
||||
|
// let _url = type == 'right' ? '/api/dashboard/purchase-receipt/un-receipt-sum-qty' : '/api/dashboard/purchase-receipt/receipt-sum-qty' |
||||
|
let _url = type == 'right' ? '/api/dashboard/purchase-receipt/un-receipt-sum-qty' : '/api/dashboard/purchase-receipt/no-put-away-sum-qty' |
||||
|
// todo:this.selectDate |
||||
|
return axiosUtil.ajax_get(_url).then(res => { |
||||
|
if(type == 'right'){ |
||||
|
this.rightSumQty = res.qty |
||||
|
// this.rightSumQty = 6200 |
||||
|
}else{ |
||||
|
this.leftSumQty = res.qty |
||||
|
// this.leftSumQty = 4260 |
||||
|
} |
||||
|
}).catch(error => { |
||||
|
console.log(error) |
||||
|
}) |
||||
|
}, |
||||
|
// 获取左侧柱状图数据 |
||||
|
initLeftEchart(){ |
||||
|
// /api/dashboard/purchase-receipt/receipt-count-by-supplier |
||||
|
// todo:this.selectDate |
||||
|
return axiosUtil.ajax_get('/api/dashboard/purchase-receipt/no-put-away-by-supplier').then(res => { |
||||
|
let _supplierShortName = [] |
||||
|
let _qtys = [] |
||||
|
res.forEach(item=>{ |
||||
|
_supplierShortName.push(item.supplierShortName || "") |
||||
|
_qtys.push(item.qty) |
||||
|
}) |
||||
|
// 假数据 |
||||
|
// _supplierShortName=['龙方科技','一汽恒威','重庆睿信汽车零部件','上海埃姆','上海磊拓','逸韩机械科技','江苏泛亚微透','埃维尔汽车部件','上海耀春汽车零件','江苏力崛模塑']; |
||||
|
// _qtys=[150,100,300,1000,100,450,1000,100,800,260] |
||||
|
// 基于准备好的dom，初始化echarts实例 |
||||
|
this.leftEchatData=res |
||||
|
let myChart = null |
||||
|
myChart = echarts.init(document.getElementById('leftTopEchart')) |
||||
|
let option = { |
||||
|
grid:{ |
||||
|
left:"50", |
||||
|
right:"30", |
||||
|
bottom:"50", |
||||
|
top:"50", |
||||
|
}, |
||||
|
animationDuration:3000, |
||||
|
xAxis: [ |
||||
|
{ |
||||
|
type: 'category', |
||||
|
data: _supplierShortName, |
||||
|
axisLabel: { |
||||
|
show: true, |
||||
|
textStyle: { |
||||
|
// color: 'rgba(16,183,245,0.8)' |
||||
|
color: '#fff' |
||||
|
} |
||||
|
}, |
||||
|
axisLine: { |
||||
|
lineStyle: { |
||||
|
// color: 'rgba(16,183,245,0.2)', |
||||
|
color: '#4d5472', |
||||
|
} |
||||
|
}, |
||||
|
} |
||||
|
], |
||||
|
yAxis: [ |
||||
|
{ |
||||
|
type: 'value', |
||||
|
axisLabel: { |
||||
|
show: true, |
||||
|
textStyle: { |
||||
|
color: '#fff' |
||||
|
} |
||||
|
}, |
||||
|
splitLine:{ |
||||
|
lineStyle: { |
||||
|
color: '#4d5472', |
||||
|
}, |
||||
|
}, |
||||
|
} |
||||
|
], |
||||
|
series: [ |
||||
|
{ |
||||
|
name: 'Rainfall', |
||||
|
type: 'bar', |
||||
|
barMaxWidth: '70', |
||||
|
data: _qtys, |
||||
|
label:{ |
||||
|
normal:{ |
||||
|
show:true, |
||||
|
position:'top', |
||||
|
textStyle:{ |
||||
|
fontSize:12, |
||||
|
color:'#fff' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
itemStyle: { |
||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
||||
|
{ offset: 0, color: '#5fcb94' }, |
||||
|
{ offset: 1, color: '#3fc9ff' } |
||||
|
]) |
||||
|
}, |
||||
|
barWidth: '40%', |
||||
|
} |
||||
|
], |
||||
|
tooltip: { |
||||
|
type: 'showTip', |
||||
|
}, |
||||
|
}; |
||||
|
// 绘制图表 |
||||
|
myChart.setOption(option); |
||||
|
// window.addEventListener('resize',function(){ |
||||
|
// myChart.resize() |
||||
|
// }) |
||||
|
}).catch(error => { |
||||
|
console.log(error) |
||||
|
}) |
||||
|
}, |
||||
|
// 获取右侧环状图数据(echart) |
||||
|
initRightEchart(){ |
||||
|
// todo:this.selectDate |
||||
|
return axiosUtil.ajax_get('/api/dashboard/purchase-receipt/un-receipt-count-by-supplier').then(res => { |
||||
|
let _data = [] |
||||
|
this.rightEchatDataSum = 0 |
||||
|
res.forEach(item=>{ |
||||
|
let _item = { |
||||
|
name:item.supplierShortName, |
||||
|
value:item.qty, |
||||
|
} |
||||
|
this.rightEchatDataSum += Number(item.qty) |
||||
|
_data.push(_item) |
||||
|
}) |
||||
|
this.rightEchatData=res |
||||
|
// 假数据 |
||||
|
// _data = [ |
||||
|
// { value: 150, name: '龙方科技' }, |
||||
|
// { value: 100, name: '一汽恒威' }, |
||||
|
// { value: 300, name: '重庆睿信汽车零部件' }, |
||||
|
// { value: 1000, name: '上海埃姆' }, |
||||
|
// { value: 100, name: '上海磊拓' }, |
||||
|
// { value: 450, name: '逸韩机械科技' }, |
||||
|
// { value: 1000, name: '江苏泛亚微透' }, |
||||
|
// { value: 100, name: '埃维尔汽车部件' }, |
||||
|
// { value: 800, name: '上海耀春汽车零件' }, |
||||
|
// { value: 260, name: '江苏力崛模塑' }, |
||||
|
// ] |
||||
|
// this.rightEchatData=_data |
||||
|
// this.rightEchatDataSum = 4260 |
||||
|
// 基于准备好的dom，初始化echarts实例 |
||||
|
let myChart = null |
||||
|
myChart = echarts.init(document.getElementById('rightRingEchart')) |
||||
|
let option = { |
||||
|
tooltip: { |
||||
|
trigger: 'item' |
||||
|
}, |
||||
|
animationDuration:3000, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: 'Access From', |
||||
|
type: 'pie', |
||||
|
radius: ["50%","70%"], |
||||
|
data: _data, |
||||
|
label: { |
||||
|
alignTo: 'edge', |
||||
|
formatter: '{name|{b}}\n{number|{c}}', |
||||
|
minMargin: 5, |
||||
|
edgeDistance: 10, |
||||
|
lineHeight: 15, |
||||
|
rich: { |
||||
|
name:{ |
||||
|
fontSize: 14, |
||||
|
color: '#fff' |
||||
|
}, |
||||
|
number: { |
||||
|
fontSize: 12, |
||||
|
color: '#fff' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
} |
||||
|
] |
||||
|
}; |
||||
|
// 绘制图表 |
||||
|
myChart.setOption(option); |
||||
|
// window.addEventListener('resize',function(){ |
||||
|
// myChart.resize() |
||||
|
// }) |
||||
|
}).catch(error => { |
||||
|
console.log(error) |
||||
|
}) |
||||
|
}, |
||||
|
// 获取右侧环状图数据(dataV) |
||||
|
// initRightRingDataV(){ |
||||
|
// return axiosUtil.ajax_get('/api/dashboard/purchase-receipt/un-receipt-count-by-supplier').then(res => { |
||||
|
// let _data = [] |
||||
|
// res.forEach(item=>{ |
||||
|
// let _item = { |
||||
|
// name:item.supplierShortName, |
||||
|
// value:item.qty, |
||||
|
// } |
||||
|
// _data.push(_item) |
||||
|
// }) |
||||
|
// // _data = [ |
||||
|
// // {name: '宝适汽车部件（太仓）',value: 400}, |
||||
|
// // {name: '浙江华远汽车',value: 390}, |
||||
|
// // {name: '广州信强汽车配件',value: 1500}, |
||||
|
// // {name: '上海通领汽车科技',value: 280}, |
||||
|
// // {name: '高士线业（深圳）',value: 1010}, |
||||
|
// // {name: '重庆睿信汽车零部件',value: 120}, |
||||
|
// // {name: '龙方科技',value: 650}, |
||||
|
// // {name: '江苏力崛模塑',value: 300}, |
||||
|
// // {name: '一汽恒威',value: 950}, |
||||
|
// // {name: '上海磊拓',value: 600} |
||||
|
// // ] |
||||
|
// this.ringRightconfig={ |
||||
|
// radius:'60%', |
||||
|
// activeRadius:"65%", |
||||
|
// data:_data, |
||||
|
// showOriginValue: true, |
||||
|
// digitalFlopStyle:{ |
||||
|
// fontSize:16, |
||||
|
// } |
||||
|
// } |
||||
|
// }).catch(error => { |
||||
|
// console.log(error) |
||||
|
// }) |
||||
|
// }, |
||||
|
/* */ |
||||
|
// 初始化左右列表表头 |
||||
|
initConfig(type,data){ |
||||
|
let _config = { |
||||
|
header: this.configDefult.header, |
||||
|
data: data || [], |
||||
|
waitTime: this.configDefult.waitTime,//每页停留20秒 |
||||
|
indexHeader:this.configDefult.indexHeader, |
||||
|
index: this.configDefult.index, |
||||
|
carousel: this.configDefult.carousel, |
||||
|
columnWidth: this.configDefult.columnWidth, |
||||
|
align: this.configDefult.align, |
||||
|
hoverPause: this.configDefult.hoverPause, // 鼠标悬浮时，不停止轮播 |
||||
|
rowNum: this.configDefult.rowNum, |
||||
|
headerBGC: this.configDefult.headerBGC, |
||||
|
headerHeight: this.configDefult.headerHeight, |
||||
|
oddRowBGC: this.configDefult.oddRowBGC, |
||||
|
evenRowBGC: this.configDefult.evenRowBGC |
||||
|
} |
||||
|
if(!type){ |
||||
|
this.tableLeftConfig = _config; |
||||
|
this.tableRightConfig = _config; |
||||
|
}else if(type == "left"){ |
||||
|
this.tableLeftConfig = _config; |
||||
|
}else if(type == "right"){ |
||||
|
this.tableRightConfig = _config; |
||||
|
} |
||||
|
}, |
||||
|
// table数据（左右下通用） |
||||
|
async getBottomList(type){ |
||||
|
// let _url = type=='left' ? '/api/dashboard/purchase-receipt/receipt-item-list' : '/api/dashboard/purchase-receipt/un-receipt-item-list' |
||||
|
let _url = type=='left' ? '/api/dashboard/purchase-receipt/no-put-away-item-list' : '/api/dashboard/purchase-receipt/un-receipt-item-list' |
||||
|
return axiosUtil.ajax_get(_url).then(res => { |
||||
|
if(res.length <= 0){ |
||||
|
return |
||||
|
} |
||||
|
let rows = [] |
||||
|
// let _res = [] |
||||
|
// 假数据 |
||||
|
// if(type == "left"){ |
||||
|
// _res = [ |
||||
|
// { |
||||
|
// "supplierShortName": '龙方科技', |
||||
|
// "itemCode": "033-105K3K", |
||||
|
// "itemDesc1": '3层纸板', |
||||
|
// "qty": 150 |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "一汽恒威", |
||||
|
// "itemCode": "CC301D0AXA12", |
||||
|
// "itemDesc1": "后保险杠总成", |
||||
|
// "qty": 100 |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "重庆睿信汽车零部件", |
||||
|
// "itemCode": "00R0000FATY", |
||||
|
// "itemDesc1": '原料', |
||||
|
// "qty": 300 |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "上海埃姆", |
||||
|
// "itemCode": "1565009RAB", |
||||
|
// "itemDesc1": "门锁按钮", |
||||
|
// "qty": 1000 |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "上海磊拓", |
||||
|
// "itemCode": "2254227NAB", |
||||
|
// "itemDesc1": '裁切PVC表皮', |
||||
|
// "qty": 100 |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "逸韩机械科技", |
||||
|
// "itemCode": "1560143NAA", |
||||
|
// "itemDesc1": 'U611仪表板左饰条', |
||||
|
// "qty": 450 |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "江苏泛亚微透", |
||||
|
// "itemCode": "3254142RAC", |
||||
|
// "itemDesc1": '右后门开关面板总成', |
||||
|
// "qty": 1000 |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "埃维尔汽车部件", |
||||
|
// "itemCode": "1554222NAB", |
||||
|
// "itemDesc1": 'EFP', |
||||
|
// "qty": 100 |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "上海耀春汽车零件", |
||||
|
// "itemCode": "2251053RAA", |
||||
|
// "itemDesc1": 'BRKTFRTDRI/SPLHLRH', |
||||
|
// "qty": 800 |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "江苏力崛模塑", |
||||
|
// "itemCode": "4261142NAA", |
||||
|
// "itemDesc1": 'Mid topper vinyl', |
||||
|
// "qty": 260 |
||||
|
// } |
||||
|
// ] |
||||
|
// } |
||||
|
// if(type == "right"){ |
||||
|
// _res = [ |
||||
|
// { |
||||
|
// "supplierShortName": '宝适汽车部件（太仓）', |
||||
|
// "itemCode": "2261171NAA", |
||||
|
// "itemDesc1": 'MYLAR TAPE', |
||||
|
// "qty": 400 |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "浙江华远汽车", |
||||
|
// "itemCode": "4261147NAA", |
||||
|
// "itemDesc1": "Mid topper vinyl", |
||||
|
// "qty": 390 |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "广州信强汽车配件", |
||||
|
// "itemCode": "4261164NAA", |
||||
|
// "itemDesc1": 'Mid topper vinyl-Jacket', |
||||
|
// "qty": 1500 |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "上海通领汽车科技", |
||||
|
// "itemCode": "3254044LAC", |
||||
|
// "itemDesc1": "PNL ASY FRT DR TR LH", |
||||
|
// "qty": 280 |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "高士线业（深圳）", |
||||
|
// "itemCode": "4261013NAA", |
||||
|
// "itemDesc1": 'LH Wrapped Topper', |
||||
|
// "qty": 1010 |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "重庆睿信汽车零部件", |
||||
|
// "itemCode": "00R0000FATY", |
||||
|
// "itemDesc1": '原料', |
||||
|
// "qty": 120 |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "龙方科技", |
||||
|
// "itemCode": "033-105K3K", |
||||
|
// "itemDesc1": '3层纸板', |
||||
|
// "qty": 650 |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "江苏力崛模塑", |
||||
|
// "itemCode": "4261142NAA", |
||||
|
// "itemDesc1": 'Mid topper vinyl', |
||||
|
// "qty": 300 |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "一汽恒威", |
||||
|
// "itemCode": "CC301D0AXA12", |
||||
|
// "itemDesc1": '后保险杠总成', |
||||
|
// "qty": 950 |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "上海磊拓", |
||||
|
// "itemCode": "2254227NAB", |
||||
|
// "itemDesc1": '裁切PVC表皮', |
||||
|
// "qty": 600 |
||||
|
// } |
||||
|
// ] |
||||
|
// } |
||||
|
res.forEach(item=>{ |
||||
|
let _item = [] |
||||
|
_item[0] = item.itemCode;//ERP号 |
||||
|
_item[1] = item.itemDesc1;//描述 |
||||
|
_item[2] = item.supplierShortName;//供应商 |
||||
|
_item[3] = item.qty;//数量 |
||||
|
rows.push(_item) |
||||
|
}) |
||||
|
this.initConfig(type,rows) |
||||
|
}).catch(error => { |
||||
|
console.log(error) |
||||
|
}) |
||||
|
}, |
||||
|
// 头部时间更改操作 |
||||
|
headerDateChange(value){ |
||||
|
this.selectDate = value |
||||
|
this.fleshAllData() |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="less" scoped> |
||||
|
.bottomTable{ |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
margin-top: 1.5rem; |
||||
|
position: relative; |
||||
|
height: calc(54vh - 3rem); |
||||
|
.box-title{ |
||||
|
margin-bottom: 1.2rem; |
||||
|
} |
||||
|
.oneRow{ |
||||
|
width: calc(50% - 2rem); |
||||
|
margin: 0 1rem; |
||||
|
position: relative; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,752 @@ |
|||||
|
<template> |
||||
|
<div class="boardFullPage logisticsTimeBoardPage"> |
||||
|
<boardHeader |
||||
|
:title="'物流时刻目视表'" |
||||
|
:timeCheck="timeCheck" |
||||
|
@headerDateChange="headerDateChange" |
||||
|
:hasDateSelect="true" |
||||
|
></boardHeader> |
||||
|
<dv-loading v-show="dataLoading">Loading... </dv-loading> |
||||
|
<ul class="stateExplain"> |
||||
|
<!-- <li :style="{color:colors.nomal}"><span class="state" :style="{background:colors.nomal}"></span>无计划</li> --> |
||||
|
<!-- :style="{background:colors.green}" --> |
||||
|
<li class="colorSucess"><span class="state statuSuccess"></span>准时</li> |
||||
|
<li class="colorWarning"><span class="state statuWarning"></span>提前/延迟</li> |
||||
|
<li class="colorError"><span class="state statuError"></span>未到</li> |
||||
|
</ul> |
||||
|
<div class="lineContain" v-if="!dataLoading"> |
||||
|
<dv-scroll-board :config="config" ref="logisticsScrollBoard" style="height:100%" /> |
||||
|
<div class="hasNoData" v-if="(config.data && config.data.length <= 0) && !dataLoading">暂无数据</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import axiosUtil from '../utils/request' |
||||
|
import dateUtil from '../utils/dateUtil' |
||||
|
import util from '../utils/util' |
||||
|
import boardHeader from '../components/boardHeader' |
||||
|
|
||||
|
export default { |
||||
|
name: 'logisticsTimeBoard', |
||||
|
components:{boardHeader}, |
||||
|
data () { |
||||
|
return { |
||||
|
selectDate:null,//头部选择时间 |
||||
|
headerType:'day',//day:8-20,night:20-8 |
||||
|
pageData:[],//接口格式化数据 |
||||
|
//状态颜色值控制 |
||||
|
colors:{ |
||||
|
nomal:"#52acc5", |
||||
|
red:"red", |
||||
|
green:"#0bfeff", |
||||
|
yellow:"#e7ab24" |
||||
|
}, |
||||
|
dataLoading: true, |
||||
|
headerTimes:[],//表头包含时间 |
||||
|
configDefult: { |
||||
|
header:'', |
||||
|
data: [], |
||||
|
waitTime: util.waitTime,//每页停留20秒 |
||||
|
carousel: 'page', |
||||
|
columnWidth: [300], |
||||
|
align: ['center'], |
||||
|
hoverPause: false, // 鼠标悬浮时，不停止轮播 |
||||
|
rowNum: 15, |
||||
|
headerBGC: '#1981f6', |
||||
|
headerHeight: 65, |
||||
|
evenRowBGC: 'rgba(0, 44, 81, 0.9)', |
||||
|
oddRowBGC: 'rgba(10, 29, 50, 0.9)' |
||||
|
}, |
||||
|
config: {}, |
||||
|
currentServerDate:localStorage.getItem('currentServerDate') |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
this.init() |
||||
|
}, |
||||
|
destroyed() { |
||||
|
clearInterval(this.intervalId) |
||||
|
}, |
||||
|
methods: { |
||||
|
init(){ |
||||
|
// 当前时间获取服务器处理 |
||||
|
axiosUtil.ajax_get('/api/dashboard/asn-time-window/get-server-date-time').then(res => { |
||||
|
this.initHeader(res) |
||||
|
clearInterval(this.intervalId) |
||||
|
this.intervalId = setInterval(() => { |
||||
|
this.getList() |
||||
|
}, 300000)// 每5分钟获取一次数据 |
||||
|
util.addEventResizeFlesh() |
||||
|
}).catch(error => { |
||||
|
this.dataLoading = false |
||||
|
// this.$message({ |
||||
|
// message: "获取服务器时间异常", |
||||
|
// type: "error", |
||||
|
// }); |
||||
|
}) |
||||
|
}, |
||||
|
// 8点和20点重新获取服务器时间 |
||||
|
timeCheck(res){ |
||||
|
let time = dateUtil.getnowTime(res) |
||||
|
if(time == '8:00:00' || time == '08:00:00' || time == '20:00:00'){ |
||||
|
location.reload() |
||||
|
} |
||||
|
}, |
||||
|
initConfig(data){ |
||||
|
this.config = { |
||||
|
header: this.configDefult.header, |
||||
|
data: data || [], |
||||
|
waitTime: this.configDefult.waitTime,//每页停留20秒 |
||||
|
carousel: this.configDefult.carousel, |
||||
|
columnWidth: this.configDefult.columnWidth, |
||||
|
align: this.configDefult.align, |
||||
|
hoverPause: this.configDefult.hoverPause, // 鼠标悬浮时，不停止轮播 |
||||
|
rowNum: this.configDefult.rowNum, |
||||
|
headerBGC: this.configDefult.headerBGC, |
||||
|
headerHeight: this.configDefult.headerHeight, |
||||
|
oddRowBGC: this.configDefult.oddRowBGC, |
||||
|
evenRowBGC: this.configDefult.evenRowBGC |
||||
|
} |
||||
|
}, |
||||
|
// 初始化表头按：当前时间选择显示的时间段 |
||||
|
initHeader(res){ |
||||
|
this.dataLoading = true |
||||
|
this.headerTimes = [] |
||||
|
let _header = []; |
||||
|
_header.push('<div class="doubleNameTagHeader"><span class="name">供应商简称</span><div class="line"></div><span class="time">时间</span></div>') |
||||
|
let _currentHour = new Date(res).getHours() |
||||
|
// 8-20 |
||||
|
if(Number(_currentHour) < 20 && Number(_currentHour) >= 8){ |
||||
|
this.headerType='day'; |
||||
|
for(let i=8;i<20;i++){ |
||||
|
_header.push(`${i}时-${i+1}时`) |
||||
|
this.headerTimes.push(i) |
||||
|
} |
||||
|
} |
||||
|
// 20-8 |
||||
|
else{ |
||||
|
this.headerType='night'; |
||||
|
for(let i=20;i<24;i++){ |
||||
|
_header.push(`${i}时-${i+1}时`) |
||||
|
this.headerTimes.push(i) |
||||
|
} |
||||
|
for(let i=0;i<8;i++){ |
||||
|
_header.push(`${i}时-${i+1}时`) |
||||
|
this.headerTimes.push(i) |
||||
|
} |
||||
|
} |
||||
|
this.configDefult.header = _header |
||||
|
this.getList() |
||||
|
}, |
||||
|
// 格式化状态及回显时间 + 供应商底色初始化(name = 供应商名称) |
||||
|
initStatus(v,name){ |
||||
|
// let _background_name = ""; |
||||
|
// let _background = this.colors.nomal; |
||||
|
let _background_class= "statuNomal"; |
||||
|
let _background_name_class = ""; |
||||
|
let _planTime = v.planArriveDate.slice(5,16).replace('T',' ') |
||||
|
let _receiptTime_year = v.receiptTime.slice(0,4) |
||||
|
let _time = Number(_receiptTime_year) <= 2000 ? '' : v.receiptTime.slice(5,16).replace('T',' ') |
||||
|
// let _number_planTime = new Date(v.planArriveDate).getTime() |
||||
|
// let _number_time = new Date(v.receiptTime).getTime() |
||||
|
// let _oneHour = 3600000; |
||||
|
// 1）绿色（准时）：发货单到货时间（2022-11-01 14:15），前后各1个小时，为准时。 |
||||
|
|
||||
|
// if((Math.abs(_number_planTime - _number_time) <= _oneHour) && v.sta == '1'){ |
||||
|
if(v.receiptStatus == "准时"){ |
||||
|
// _background = this.colors.green |
||||
|
_background_class= "statuSuccess"; |
||||
|
} |
||||
|
// 2）黄色（提前/延时）：到货时间（2022-11-01 14:15） |
||||
|
// 提前：按照预计到货时间提前60分钟的收货是提前 |
||||
|
// 延时：按照预计到货时间超过60分钟后的收货都是延时 |
||||
|
// if((Math.abs(_number_planTime - _number_time) > _oneHour) && v.sta == '1'){ |
||||
|
if(v.receiptStatus == "延后" || v.receiptStatus == "提前"){ |
||||
|
// _background = this.colors.yellow |
||||
|
_background_class= "statuWarning"; |
||||
|
} |
||||
|
|
||||
|
// 3）红色（未到）：超过60分钟，并且到现在为止还没有到货的，在预计到货时间的时间列， |
||||
|
// 单元格标记为红色；同时，在供应商简称列（单元格）填充红色。 |
||||
|
// 如果后期收到货，并且该供应商没有未收货，供应商简称列（单元格）改为正常显示。 |
||||
|
// if((Math.abs(_number_planTime - _number_time) > _oneHour) && v.sta == '0'){ |
||||
|
// 在当前时间看板内v.receiptStatus == "延期" || v.isDelay = true标红， |
||||
|
// 不在当前时间看板内v.isDelay = true标红 |
||||
|
if(v.receiptStatus == "延期" || v.isDelay){ |
||||
|
// _background = this.colors.red |
||||
|
// _background_name = this.colors.red |
||||
|
_background_class= "statuError"; |
||||
|
if(this.headerType == 'night'){ |
||||
|
_background_name_class = "statuError" |
||||
|
}else{ |
||||
|
_background_name_class= ""; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
if(name || name == ""){ |
||||
|
// 供应商名称标记 |
||||
|
// style="background:${_background_name}" |
||||
|
return `<div class="${_background_name_class}">${name}</div>` |
||||
|
}else{ |
||||
|
// style="background:${_background}" |
||||
|
return `<div class="tableInnerState ${_background_class}"><div class="row"><span class="time">${_planTime}</span></div><div class="row"><span class="time">${_time}</span></div></div>`; |
||||
|
} |
||||
|
}, |
||||
|
// 格式化接口数据 |
||||
|
initPageData(data){ |
||||
|
let _data = []; |
||||
|
// 查重重组 |
||||
|
for(let i=0;i<data.length;i++){ |
||||
|
if(!data[i].supplierShortName){data[i].supplierShortName = ""} |
||||
|
let _index = data[i].timeSpan.indexOf(":") |
||||
|
let _time = Number(data[i].timeSpan.slice(0,_index)) |
||||
|
// 判断条件：1、当前看板有的时间段；或者 2、状态为延迟，且为晚上看板 |
||||
|
if(this.headerTimes.indexOf(_time) >= 0 || (data[i].isDelay && this.headerType == "night")){ |
||||
|
let entity={ |
||||
|
supplierShortName:data[i].supplierShortName, |
||||
|
list:[] |
||||
|
}; |
||||
|
|
||||
|
if(_data.find(e => e.supplierShortName == data[i].supplierShortName)){ |
||||
|
continue; |
||||
|
} |
||||
|
|
||||
|
data.forEach((element,key) => { |
||||
|
if(element.supplierShortName==data[i].supplierShortName){ |
||||
|
entity.list.push(element) |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
_data.push(entity); |
||||
|
} |
||||
|
} |
||||
|
this.pageData = _data |
||||
|
}, |
||||
|
// 获取接口数据 |
||||
|
async getList(){ |
||||
|
this.dataLoading = true |
||||
|
this.initConfig() |
||||
|
let _data = { |
||||
|
datetime:this.selectDate || this.currentServerDate |
||||
|
} |
||||
|
axiosUtil.ajax_get('/api/dashboard/asn-time-window/asn-time-window',_data).then(res => { |
||||
|
// let _res = [ |
||||
|
// { |
||||
|
// "supplierShortName": "GYSDM1012333", |
||||
|
// "timeSpan": "00:00", |
||||
|
// "planArriveDate": "2022-11-16T00:00:00", |
||||
|
// "receiptTime": "", |
||||
|
// "receiptStatus": null, |
||||
|
// "isDelay": true |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "GYSDM10166666666", |
||||
|
// "timeSpan": "6:00", |
||||
|
// "planArriveDate": "2022-11-16T06:00:00", |
||||
|
// "receiptTime": "2022-11-16T06:53:00", |
||||
|
// "receiptStatus": "null", |
||||
|
// "isDelay": true |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "GYSDM10166666666", |
||||
|
// "timeSpan": "12:00", |
||||
|
// "planArriveDate": "2022-11-16T12:00:00", |
||||
|
// "receiptTime": "2022-11-16T06:53:00", |
||||
|
// "receiptStatus": "null", |
||||
|
// "isDelay": false |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "GYSDM1012333111", |
||||
|
// "timeSpan": "6:00", |
||||
|
// "planArriveDate": "2022-11-16T06:00:00", |
||||
|
// "receiptTime": "2022-11-16T06:53:00", |
||||
|
// "receiptStatus": "准时", |
||||
|
// "isDelay": false |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "GYSDM1012333111", |
||||
|
// "timeSpan": "8:00", |
||||
|
// "planArriveDate": "2022-11-16T08:00:00", |
||||
|
// "receiptTime": "2022-11-16T06:53:00", |
||||
|
// "receiptStatus": "准时", |
||||
|
// "isDelay": false |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "GYSDM101233322222", |
||||
|
// "timeSpan": "12:00", |
||||
|
// "planArriveDate": "2022-11-16T12:00:00", |
||||
|
// "receiptTime": "2022-11-16T06:53:00", |
||||
|
// "receiptStatus": "准时", |
||||
|
// "isDelay": false |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "龙方科技", |
||||
|
// "timeSpan": "23:00", |
||||
|
// "planArriveDate": "2022-11-16T23:00:00", |
||||
|
// "receiptTime": "2022-11-16T20:53:28.8267232", |
||||
|
// "receiptStatus": "提前", |
||||
|
// "isDelay": false |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "一汽恒威", |
||||
|
// "timeSpan": "3:00", |
||||
|
// "planArriveDate": "2022-11-16T03:30:00", |
||||
|
// "receiptTime": "2022-11-16T07:20:28.8267232", |
||||
|
// "receiptStatus": "延后", |
||||
|
// "isDelay": false |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "重庆睿信汽车零部件", |
||||
|
// "timeSpan": "7:00", |
||||
|
// "planArriveDate": "2022-11-16T07:30:12", |
||||
|
// "receiptTime": "2022-11-16T07:22:53.2669088", |
||||
|
// "receiptStatus": "准时", |
||||
|
// "isDelay": false |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "上海埃姆", |
||||
|
// "timeSpan": "2:00", |
||||
|
// "planArriveDate": "2022-11-16T02:30:12", |
||||
|
// "receiptTime": "2022-11-16T02:10:53.2669088", |
||||
|
// "receiptStatus": "准时", |
||||
|
// "isDelay": false |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "上海磊拓", |
||||
|
// "timeSpan": "23:00", |
||||
|
// "planArriveDate": "2022-11-16T23:30:12", |
||||
|
// "receiptTime": "2022-11-16T07:22:53.2669088", |
||||
|
// "receiptStatus": "延后", |
||||
|
// "isDelay": false |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "逸韩机械科技", |
||||
|
// "timeSpan": "06:00", |
||||
|
// "planArriveDate": "2022-11-16T06:30:12", |
||||
|
// "receiptTime": "2022-11-16T02:22:53.2669088", |
||||
|
// "receiptStatus": "提前", |
||||
|
// "isDelay": false |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "江苏泛亚微透", |
||||
|
// "timeSpan": "20:00", |
||||
|
// "planArriveDate": "2022-11-16T20:00:12", |
||||
|
// "receiptTime": "2022-11-16T20:53:53.2669088", |
||||
|
// "receiptStatus": "准时", |
||||
|
// "isDelay": false |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "埃维尔汽车部件", |
||||
|
// "timeSpan": "21:00", |
||||
|
// "planArriveDate": "2022-11-16T21:30:12", |
||||
|
// "receiptTime": "2022-11-16T21:10:53.2669088", |
||||
|
// "receiptStatus": "准时", |
||||
|
// "isDelay": false |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "上海耀春汽车零件", |
||||
|
// "timeSpan": "5:00", |
||||
|
// "planArriveDate": "2022-11-16T05:30:12", |
||||
|
// "receiptTime": "2022-11-16T04:22:53.2669088", |
||||
|
// "receiptStatus": "准时", |
||||
|
// "isDelay": false |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "江苏力崛模塑", |
||||
|
// "timeSpan": "1:00", |
||||
|
// "planArriveDate": "2022-11-16T01:00:12", |
||||
|
// "receiptTime": "2022-11-16T07:36:53.2669088", |
||||
|
// "receiptStatus": "延后", |
||||
|
// "isDelay": false |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "宝适汽车部件（太仓）", |
||||
|
// "timeSpan": "15:00", |
||||
|
// "planArriveDate": "2022-11-16T15:00:12", |
||||
|
// "receiptTime": "", |
||||
|
// "receiptStatus": "提前", |
||||
|
// "isDelay": true |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "浙江华远汽车", |
||||
|
// "timeSpan": "04:00", |
||||
|
// "planArriveDate": "2022-11-16T04:00:12", |
||||
|
// "receiptTime": "2022-11-16T05:22:53.2669088", |
||||
|
// "receiptStatus": "准时", |
||||
|
// "isDelay": false |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "广州信强汽车配件", |
||||
|
// "timeSpan": "22:00", |
||||
|
// "planArriveDate": "2022-11-16T22:30:12", |
||||
|
// "receiptTime": "2022-11-16T07:22:53.2669088", |
||||
|
// "receiptStatus": "准时", |
||||
|
// "isDelay": false |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "上海通领汽车科技", |
||||
|
// "timeSpan": "05:00", |
||||
|
// "planArriveDate": "2022-11-16T05:00:12", |
||||
|
// "receiptTime": "2022-11-16T01:22:53.2669088", |
||||
|
// "receiptStatus": "提前", |
||||
|
// "isDelay": false |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "高士线业（深圳）", |
||||
|
// "timeSpan": "12:00", |
||||
|
// "planArriveDate": "2022-11-16T12:30:12", |
||||
|
// "receiptTime": "2022-11-16T13:08:53.2669088", |
||||
|
// "receiptStatus": "准时", |
||||
|
// "isDelay": false |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "埃维尔汽12", |
||||
|
// "timeSpan": "12:00", |
||||
|
// "planArriveDate": "2022-11-16T12:00:12", |
||||
|
// "receiptTime": "2022-11-16T14:22:53.2669088", |
||||
|
// "receiptStatus": "延期", |
||||
|
// "isDelay": false |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "埃维尔汽13", |
||||
|
// "timeSpan": "12:00", |
||||
|
// "planArriveDate": "2022-11-16T12:12:12", |
||||
|
// "receiptTime": "2022-11-16T14:22:53.2669088", |
||||
|
// "receiptStatus": "准时", |
||||
|
// "isDelay": false |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "埃维尔汽14", |
||||
|
// "timeSpan": "12:00", |
||||
|
// "planArriveDate": "2022-11-16T12:12:12", |
||||
|
// "receiptTime": "2022-11-16T14:22:53.2669088", |
||||
|
// "receiptStatus": "准时", |
||||
|
// "isDelay": false |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "埃维尔汽15", |
||||
|
// "timeSpan": "12:00", |
||||
|
// "planArriveDate": "2022-11-16T12:12:12", |
||||
|
// "receiptTime": "2022-11-16T14:22:53.2669088", |
||||
|
// "receiptStatus": "准时", |
||||
|
// "isDelay": false |
||||
|
// } |
||||
|
// ]; |
||||
|
// let _res = [ |
||||
|
// { |
||||
|
// "supplierShortName": "GYSDM1012333", |
||||
|
// "timeSpan": "8:00", |
||||
|
// "planArriveDate": "2022-11-16T08:00:00", |
||||
|
// "receiptTime": "0001-01-01T00:00:00", |
||||
|
// "receiptStatus": "延后", |
||||
|
// "isDelay": false |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "龙方科技", |
||||
|
// "timeSpan": "10:00", |
||||
|
// "planArriveDate": "2022-11-16T10:00:00", |
||||
|
// "receiptTime": "2022-11-16T11:53:28.8267232", |
||||
|
// "receiptStatus": "准时", |
||||
|
// "isDelay": false |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "一汽恒威", |
||||
|
// "timeSpan": "9:00", |
||||
|
// "planArriveDate": "2022-11-16T09:00:00", |
||||
|
// "receiptTime": "2022-11-16T17:20:28.8267232", |
||||
|
// "receiptStatus": "延后", |
||||
|
// "isDelay": false |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "重庆睿信汽车零部件", |
||||
|
// "timeSpan": "12:00", |
||||
|
// "planArriveDate": "2022-11-16T12:30:12", |
||||
|
// "receiptTime": "2022-11-16T13:22:53.2669088", |
||||
|
// "receiptStatus": "准时", |
||||
|
// "isDelay": false |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "上海埃姆", |
||||
|
// "timeSpan": "13:00", |
||||
|
// "planArriveDate": "2022-11-16T13:30:12", |
||||
|
// "receiptTime": "2022-11-16T14:10:53.2669088", |
||||
|
// "receiptStatus": "准时", |
||||
|
// "isDelay": false |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "上海磊拓", |
||||
|
// "timeSpan": "14:00", |
||||
|
// "planArriveDate": "2022-11-16T14:30:12", |
||||
|
// "receiptTime": "2022-11-16T08:22:53.2669088", |
||||
|
// "receiptStatus": "提前", |
||||
|
// "isDelay": false |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "逸韩机械科技", |
||||
|
// "timeSpan": "15:00", |
||||
|
// "planArriveDate": "2022-11-16T15:30:12", |
||||
|
// "receiptTime": "2022-11-16T15:22:53.2669088", |
||||
|
// "receiptStatus": "准时", |
||||
|
// "isDelay": false |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "江苏泛亚微透", |
||||
|
// "timeSpan": "9:00", |
||||
|
// "planArriveDate": "2022-11-16T09:00:12", |
||||
|
// "receiptTime": "2022-11-16T19:53:53.2669088", |
||||
|
// "receiptStatus": "延后", |
||||
|
// "isDelay": false |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "埃维尔汽车部件", |
||||
|
// "timeSpan": "11:00", |
||||
|
// "planArriveDate": "2022-11-16T11:30:12", |
||||
|
// "receiptTime": "2022-11-16T12:10:53.2669088", |
||||
|
// "receiptStatus": "准时", |
||||
|
// "isDelay": false |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "上海耀春汽车零件", |
||||
|
// "timeSpan": "16:00", |
||||
|
// "planArriveDate": "2022-11-16T16:30:12", |
||||
|
// "receiptTime": "2022-11-16T16:22:53.2669088", |
||||
|
// "receiptStatus": "准时", |
||||
|
// "isDelay": false |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "江苏力崛模塑", |
||||
|
// "timeSpan": "18:00", |
||||
|
// "planArriveDate": "2022-11-16T18:00:12", |
||||
|
// "receiptTime": "2022-11-16T08:36:53.2669088", |
||||
|
// "receiptStatus": "提前", |
||||
|
// "isDelay": false |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "宝适汽车部件（太仓）", |
||||
|
// "timeSpan": "08:00", |
||||
|
// "planArriveDate": "2022-11-16T08:00:12", |
||||
|
// "receiptTime": "2022-11-16T15:00:12", |
||||
|
// "receiptStatus": "延后", |
||||
|
// "isDelay": false |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "浙江华远汽车", |
||||
|
// "timeSpan": "13:00", |
||||
|
// "planArriveDate": "2022-11-16T13:00:12", |
||||
|
// "receiptTime": "2022-11-16T13:22:53.2669088", |
||||
|
// "receiptStatus": "准时", |
||||
|
// "isDelay": false |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "广州信强汽车配件", |
||||
|
// "timeSpan": "10:00", |
||||
|
// "planArriveDate": "2022-11-16T10:30:12", |
||||
|
// "receiptTime": "2022-11-16T07:22:53.2669088", |
||||
|
// "receiptStatus": "提前", |
||||
|
// "isDelay": false |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "上海通领汽车科技", |
||||
|
// "timeSpan": "19:00", |
||||
|
// "planArriveDate": "2022-11-16T19:00:12", |
||||
|
// "receiptTime": "2022-11-16T19:22:53.2669088", |
||||
|
// "receiptStatus": "准时", |
||||
|
// "isDelay": false |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "高士线业（深圳）", |
||||
|
// "timeSpan": "12:00", |
||||
|
// "planArriveDate": "2022-11-16T12:30:12", |
||||
|
// "receiptTime": "2022-11-16T13:08:53.2669088", |
||||
|
// "receiptStatus": "准时", |
||||
|
// "isDelay": false |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "埃维尔汽12", |
||||
|
// "timeSpan": "12:00", |
||||
|
// "planArriveDate": "2022-11-16T12:00:12", |
||||
|
// "receiptTime": "2022-11-16T14:22:53.2669088", |
||||
|
// "receiptStatus": "延期", |
||||
|
// "isDelay": false |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "埃维尔汽13", |
||||
|
// "timeSpan": "12:00", |
||||
|
// "planArriveDate": "2022-11-16T12:12:12", |
||||
|
// "receiptTime": "2022-11-16T14:22:53.2669088", |
||||
|
// "receiptStatus": "准时", |
||||
|
// "isDelay": false |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "埃维尔汽14", |
||||
|
// "timeSpan": "12:00", |
||||
|
// "planArriveDate": "2022-11-16T12:12:12", |
||||
|
// "receiptTime": "2022-11-16T14:22:53.2669088", |
||||
|
// "receiptStatus": "准时", |
||||
|
// "isDelay": false |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "埃维尔汽15", |
||||
|
// "timeSpan": "12:00", |
||||
|
// "planArriveDate": "2022-11-16T12:12:12", |
||||
|
// "receiptTime": "2022-11-16T14:22:53.2669088", |
||||
|
// "receiptStatus": "准时", |
||||
|
// "isDelay": false |
||||
|
// } |
||||
|
// ]; |
||||
|
|
||||
|
this.dataLoading = false |
||||
|
if(res.length <= 0){ |
||||
|
return |
||||
|
} |
||||
|
this.initPageData(res) |
||||
|
let rows = this.initTableData(); |
||||
|
this.initConfig(rows) |
||||
|
}).catch(error => { |
||||
|
this.dataLoading = false |
||||
|
console.log(error) |
||||
|
}) |
||||
|
}, |
||||
|
// 格式化表格数据格式 |
||||
|
initTableData(){ |
||||
|
let _new = [] |
||||
|
let _row = [] |
||||
|
let hasName = [] |
||||
|
this.pageData.forEach((item,key)=>{ |
||||
|
for(let i =0;i<item.list.length;i++){ |
||||
|
let _index = item.list[i].timeSpan.indexOf(":") |
||||
|
let _time = Number(item.list[i].timeSpan.slice(0,_index)) |
||||
|
// 没有供应商增加该条数据 |
||||
|
if(hasName.length <= 0 || hasName.indexOf(item.list[i].supplierShortName) < 0){ |
||||
|
_row.push(this.initStatus(item.list[i],item.list[i].supplierShortName)) |
||||
|
_new.push(_row) |
||||
|
hasName.push(item.list[i].supplierShortName || "") |
||||
|
_row = [] |
||||
|
this.headerTimes.forEach((header,headerkey)=>{ |
||||
|
_new[key].push("") |
||||
|
}) |
||||
|
} |
||||
|
// 如果已有供应商，则重新更新表头（目的：不在此时间段，但是isDelay=true的供应商名称标红） |
||||
|
else if(item.list[i].isDelay){ |
||||
|
_new[key][0] = this.initStatus(item.list[i],item.list[i].supplierShortName) |
||||
|
} |
||||
|
// 如果表头存在，则更改对应值 |
||||
|
if(this.headerTimes.indexOf(_time) >= 0){ |
||||
|
_new[key][this.headerTimes.indexOf(_time) + 1] = this.initStatus(item.list[i]) |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
// 页面数据格式 |
||||
|
return _new |
||||
|
}, |
||||
|
// 头部时间更改操作 |
||||
|
headerDateChange(value){ |
||||
|
this.selectDate = value |
||||
|
this.init() |
||||
|
} |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="less"> |
||||
|
.logisticsTimeBoardPage{ |
||||
|
@borderColor:#43caff; |
||||
|
@colorNomal:rgba(82,172,197, 1); |
||||
|
@colorSuccess:rgba(11, 254, 255, 1); |
||||
|
@colorWarning:rgba(254,140,10, 1) ; |
||||
|
@colorError:rgba(255,45,45,1); |
||||
|
@statuSize:1.2rem; |
||||
|
@fillNomal:linear-gradient(to right, rgba(82,172,197,0.7) , rgba(82,172,197,0.3)); |
||||
|
@fillSuccess:linear-gradient(to right, rgba(11, 254, 255,0.7) , rgba(11, 254, 255,0.3)); |
||||
|
@fillWarning:linear-gradient(to right, rgba(254,140,10,0.7) , rgba(254,140,10,0.3)); |
||||
|
@fillError:linear-gradient(to right, rgba(255,45,45,0.7) , rgba(255,45,45,0.3)); |
||||
|
|
||||
|
// 状态颜色 |
||||
|
.statuNomal{ |
||||
|
border: @colorNomal solid 0.1rem; |
||||
|
background-image: @fillNomal; |
||||
|
width: 100%; |
||||
|
} |
||||
|
.statuSuccess{ |
||||
|
border: @colorSuccess solid 0.1rem; |
||||
|
background-image: @fillSuccess; |
||||
|
width: 100%; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
.statuWarning{ |
||||
|
border: @colorWarning solid 0.1rem; |
||||
|
background-image: @fillWarning; |
||||
|
width: 100%; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
.statuError{ |
||||
|
border: @colorError solid 0.1rem; |
||||
|
background-image: @fillError; |
||||
|
width: 100%; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
.colorNomal{color:@colorNomal} |
||||
|
.colorSucess{color:@colorSuccess} |
||||
|
.colorWarning{color:@colorWarning} |
||||
|
.colorError{color:@colorError} |
||||
|
// 状态栏 |
||||
|
.stateExplain{ |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
list-style: none; |
||||
|
height: 3.5rem; |
||||
|
line-height: 3.5rem; |
||||
|
overflow: hidden; |
||||
|
box-sizing: border-box; |
||||
|
margin: 0; |
||||
|
li{ |
||||
|
display: flex; |
||||
|
font-size: 1.2rem; |
||||
|
margin-right: 2.3rem; |
||||
|
|
||||
|
.state{ |
||||
|
width: @statuSize; |
||||
|
height: @statuSize; |
||||
|
display: block; |
||||
|
border-radius: 0.1rem; |
||||
|
margin-right: 0.5rem; |
||||
|
margin-top: 1.1rem; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.lineContain{ |
||||
|
margin: 0 2rem; |
||||
|
height: calc(100vh - 11.5rem); |
||||
|
} |
||||
|
|
||||
|
.dv-scroll-board .header .header-item{ |
||||
|
text-align: center; |
||||
|
} |
||||
|
.ceil{ |
||||
|
color: #fff !important; |
||||
|
border-right: @borderColor solid 0.1rem; |
||||
|
border-bottom: @borderColor solid 0.1rem; |
||||
|
padding: 0 !important; |
||||
|
} |
||||
|
.tableInnerState{ |
||||
|
position: relative; |
||||
|
color:#fff; |
||||
|
text-align:center; |
||||
|
font-size:1rem; |
||||
|
height: 100%; |
||||
|
.row{ |
||||
|
position: relative; |
||||
|
width: 100%; |
||||
|
height: 50%; |
||||
|
line-height: initial; |
||||
|
.time{ |
||||
|
position: absolute; |
||||
|
top: 50%; |
||||
|
left: 50%; |
||||
|
transform:translate(-50%,-50%); |
||||
|
-webkit-transform:translate(-50%,-50%); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,355 @@ |
|||||
|
<template> |
||||
|
<div class="boardFullPage planAndActualBoardPage"> |
||||
|
<boardHeader |
||||
|
ref="boardHeader_Ref" |
||||
|
:title="'纳入计划与实际看板'" |
||||
|
@headerDateChange="headerDateChange" |
||||
|
></boardHeader> |
||||
|
<dv-loading v-show="dataLoading">Loading...</dv-loading> |
||||
|
<div class="lineContain"> |
||||
|
<dv-scroll-board :config="config" ref="PAAscrollBoard" style="height:100%"/> |
||||
|
<div class="hasNoData" v-if="config.data.length <= 0 && !dataLoading">暂无数据</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import axiosUtil from '../utils/request' |
||||
|
import boardHeader from '../components/boardHeader' |
||||
|
import util from '../utils/util' |
||||
|
import dateUtil from '../utils/dateUtil' |
||||
|
export default { |
||||
|
name: 'planAndActualBoard', |
||||
|
components:{boardHeader}, |
||||
|
data () { |
||||
|
return { |
||||
|
selectDate:null,//头部选择时间 |
||||
|
dataLoading: true, |
||||
|
// config默认项 |
||||
|
configDefult:{ |
||||
|
// header:['供应商名称', 'ERP号', '零件号', '物料描述', '发货数量', '计划数', '实际数', '差异数', '高储', '低储' ], |
||||
|
header:['供应商名称', 'ERP号', '零件号', '物料描述', '发货数量', '实际数', '差异数', '高储', '低储' ], |
||||
|
waitTime: util.waitTime,//每页停留20秒d |
||||
|
carousel: 'page', |
||||
|
index: true, |
||||
|
indexHeader: '序号', |
||||
|
// columnWidth: [80,260,260,260,260,130,130,130,130,130,130], |
||||
|
columnWidth: [80,290,260,260,260,150,150,150,150,150], |
||||
|
// align: ['center','center','center','center','center','center','center','center','center','center','center'], |
||||
|
align: ['center','center','center','center','center','center','center','center','center','center'], |
||||
|
hoverPause: false, // 鼠标悬浮时，不停止轮播 |
||||
|
rowNum: 10, |
||||
|
headerBGC: '#1981f6', |
||||
|
headerHeight: 65, |
||||
|
evenRowBGC: 'rgba(0, 44, 81, 0.9)', |
||||
|
oddRowBGC: 'rgba(10, 29, 50, 0.9)' |
||||
|
}, |
||||
|
config: {} |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
this.initConfig() |
||||
|
this.getList() |
||||
|
clearInterval(this.intervalId) |
||||
|
this.intervalId = setInterval(() => { |
||||
|
this.getList() |
||||
|
}, 60000)//一分钟刷新数据 |
||||
|
util.addEventResizeFlesh() |
||||
|
}, |
||||
|
destroyed() { |
||||
|
clearInterval(this.intervalId) |
||||
|
}, |
||||
|
methods: { |
||||
|
init(){ |
||||
|
this.initConfig() |
||||
|
this.getList() |
||||
|
util.addEventResizeFlesh() |
||||
|
}, |
||||
|
initConfig(data){ |
||||
|
this.config = { |
||||
|
header: this.configDefult.header, |
||||
|
data: data || [], |
||||
|
waitTime: this.configDefult.waitTime,//每页停留20秒d |
||||
|
carousel: this.configDefult.carousel, |
||||
|
index: this.configDefult.index, |
||||
|
indexHeader: this.configDefult.indexHeader, |
||||
|
columnWidth: this.configDefult.columnWidth, |
||||
|
align: this.configDefult.align, |
||||
|
hoverPause: this.configDefult.hoverPause, // 鼠标悬浮时，不停止轮播 |
||||
|
rowNum: this.configDefult.rowNum, |
||||
|
headerBGC: this.configDefult.headerBGC, |
||||
|
headerHeight: this.configDefult.headerHeight, |
||||
|
oddRowBGC: this.configDefult.oddRowBGC, |
||||
|
evenRowBGC: this.configDefult.evenRowBGC |
||||
|
} |
||||
|
}, |
||||
|
async getList(){ |
||||
|
this.dataLoading = true |
||||
|
this.initConfig() |
||||
|
// todo:this.selectDate， |
||||
|
// 初始问题处理是否可以传空，不可以的话初始时候从接口重新获取当前时间 |
||||
|
// dateUtil.getServerTime((res)=>{ |
||||
|
// console.log(92,res) |
||||
|
// }) |
||||
|
console.log(87,this.selectDate) |
||||
|
axiosUtil.ajax_get('/api/dashboard/plan-and-actual/plan-actual-list').then(res => { |
||||
|
this.dataLoading = false |
||||
|
if(res.length <= 0){ |
||||
|
return |
||||
|
} |
||||
|
let rows = [] |
||||
|
// 假数据 |
||||
|
// let _res = [ |
||||
|
// {"supplierShortName": "龙方科技", |
||||
|
// "itemCode": "033-105K3K", |
||||
|
// "itemName": "P000000000003166", |
||||
|
// "itemDesc1": "3层纸板", |
||||
|
// "receiptNoteCount": 1200, |
||||
|
// "supplierAsnCount": 1200, |
||||
|
// "planArriveQty": 1200, |
||||
|
// "receiptQty": 1200, |
||||
|
// "putawayQty": 650, |
||||
|
// "maxQty": 600, |
||||
|
// "minQty": 50 |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "一汽恒威", |
||||
|
// "itemCode": "CC301D0AXA12", |
||||
|
// "itemName": "P000000000000548", |
||||
|
// "itemDesc1": "后保险杠总成", |
||||
|
// "receiptNoteCount": 950, |
||||
|
// "supplierAsnCount": 952, |
||||
|
// "planArriveQty": 1000, |
||||
|
// "receiptQty": 900, |
||||
|
// "putawayQty": 350, |
||||
|
// "maxQty": 1000, |
||||
|
// "minQty": 500 |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "重庆睿信汽车零部件", |
||||
|
// "itemCode": "00R0000FATY", |
||||
|
// "itemName": "P000000000003086", |
||||
|
// "itemDesc1": "原料", |
||||
|
// "receiptNoteCount": 120, |
||||
|
// "supplierAsnCount": 120, |
||||
|
// "planArriveQty": 120, |
||||
|
// "receiptQty": 120, |
||||
|
// "putawayQty": 120, |
||||
|
// "maxQty": 120, |
||||
|
// "minQty": 0 |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "上海埃姆", |
||||
|
// "itemCode": "1565009RAB", |
||||
|
// "itemName": "JB5T 14017 CC3JA61", |
||||
|
// "itemDesc1": "门锁按钮", |
||||
|
// "receiptNoteCount": 550, |
||||
|
// "supplierAsnCount": 550, |
||||
|
// "planArriveQty": 550, |
||||
|
// "receiptQty": 550, |
||||
|
// "putawayQty": 550, |
||||
|
// "maxQty": 500, |
||||
|
// "minQty": 0 |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "上海磊拓", |
||||
|
// "itemCode": "2254227NAB", |
||||
|
// "itemName": "MA1B R044F62 AAZHE", |
||||
|
// "itemDesc1": "裁切PVC表皮", |
||||
|
// "receiptNoteCount": 1000, |
||||
|
// "supplierAsnCount": 1001, |
||||
|
// "planArriveQty": 1000, |
||||
|
// "receiptQty": 1000, |
||||
|
// "putawayQty": 1000, |
||||
|
// "maxQty": 1000, |
||||
|
// "minQty": 500 |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "逸韩机械科技", |
||||
|
// "itemCode": "1560143NAA", |
||||
|
// "itemName": "N2CB S044K67 AASM02", |
||||
|
// "itemDesc1": "U611仪表板左饰条", |
||||
|
// "receiptNoteCount": 650, |
||||
|
// "supplierAsnCount": 640, |
||||
|
// "planArriveQty": 640, |
||||
|
// "receiptQty": 640, |
||||
|
// "putawayQty": 600, |
||||
|
// "maxQty": 600, |
||||
|
// "minQty": 110 |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "江苏泛亚微透", |
||||
|
// "itemCode": "3254142RAC", |
||||
|
// "itemName": "MA1B 14A567 AB3JA6", |
||||
|
// "itemDesc1": "右后门开关面板总成", |
||||
|
// "receiptNoteCount": 720, |
||||
|
// "supplierAsnCount": 720, |
||||
|
// "planArriveQty": 700, |
||||
|
// "receiptQty": 720, |
||||
|
// "putawayQty": 0, |
||||
|
// "maxQty": 0, |
||||
|
// "minQty": 0 |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "埃维尔汽车部件", |
||||
|
// "itemCode": "1554222NAB", |
||||
|
// "itemName": "LJ7T 18A802 EF", |
||||
|
// "itemDesc1": "EFP", |
||||
|
// "receiptNoteCount": 300, |
||||
|
// "supplierAsnCount": 300, |
||||
|
// "planArriveQty": 300, |
||||
|
// "receiptQty": 200, |
||||
|
// "putawayQty": 300, |
||||
|
// "maxQty": 300, |
||||
|
// "minQty": 50 |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "上海耀春汽车零件", |
||||
|
// "itemCode": "2251053RAA", |
||||
|
// "itemName": "FA1B 7822606 A", |
||||
|
// "itemDesc1": "BRKTFRTDRI/SPLHLRH", |
||||
|
// "receiptNoteCount": 102, |
||||
|
// "supplierAsnCount": 102, |
||||
|
// "planArriveQty": 102, |
||||
|
// "receiptQty": 100, |
||||
|
// "putawayQty": 100, |
||||
|
// "maxQty": 150, |
||||
|
// "minQty": 10 |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "江苏力崛模塑", |
||||
|
// "itemCode": "4261142NAA", |
||||
|
// "itemName": "LC5B-S044L96-BLU4", |
||||
|
// "itemDesc1": "Mid topper vinyl", |
||||
|
// "receiptNoteCount": 800, |
||||
|
// "supplierAsnCount": 800, |
||||
|
// "planArriveQty": 800, |
||||
|
// "receiptQty": 800, |
||||
|
// "putawayQty": 800, |
||||
|
// "maxQty": 1000, |
||||
|
// "minQty": 500 |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "宝适汽车部件（太仓）", |
||||
|
// "itemCode": "2261171NAA", |
||||
|
// "itemName": "LC5B 80A212 A", |
||||
|
// "itemDesc1": "MYLAR TAPE", |
||||
|
// "receiptNoteCount": 1205, |
||||
|
// "supplierAsnCount": 1205, |
||||
|
// "planArriveQty": 1200, |
||||
|
// "receiptQty": 1200, |
||||
|
// "putawayQty": 1000, |
||||
|
// "maxQty": 1200, |
||||
|
// "minQty": 500 |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "浙江华远汽车", |
||||
|
// "itemCode": "4261147NAA", |
||||
|
// "itemName": "L2CB-S044L96-ALUV", |
||||
|
// "itemDesc1": "Mid topper vinyl", |
||||
|
// "receiptNoteCount": 290, |
||||
|
// "supplierAsnCount": 290, |
||||
|
// "planArriveQty": 300, |
||||
|
// "receiptQty": 290, |
||||
|
// "putawayQty": 300, |
||||
|
// "maxQty": 300, |
||||
|
// "minQty": 200 |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "广州信强汽车配件", |
||||
|
// "itemCode": "4261164NAA", |
||||
|
// "itemName": "L2CB S044L96 AKC1", |
||||
|
// "itemDesc1": "Mid topper vinyl-Jacket", |
||||
|
// "receiptNoteCount": 390, |
||||
|
// "supplierAsnCount": 390, |
||||
|
// "planArriveQty": 390, |
||||
|
// "receiptQty": 400, |
||||
|
// "putawayQty": 390, |
||||
|
// "maxQty": 400, |
||||
|
// "minQty": 80 |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "上海通领汽车科技", |
||||
|
// "itemCode": "3254044LAC", |
||||
|
// "itemName": "MA1B 7823943 DCH3GRX", |
||||
|
// "itemDesc1": "PNL ASY FRT DR TR LH", |
||||
|
// "receiptNoteCount": 1280, |
||||
|
// "supplierAsnCount": 1280, |
||||
|
// "planArriveQty": 1200, |
||||
|
// "receiptQty": 1200, |
||||
|
// "putawayQty": 900, |
||||
|
// "maxQty": 1500, |
||||
|
// "minQty": 500 |
||||
|
// }, |
||||
|
// { |
||||
|
// "supplierShortName": "高士线业（深圳）", |
||||
|
// "itemCode": "4261013NAA", |
||||
|
// "itemName": "LC5B S04565 BA3ZHE", |
||||
|
// "itemDesc1": "LH Wrapped Topper", |
||||
|
// "receiptNoteCount": 750, |
||||
|
// "supplierAsnCount": 750, |
||||
|
// "planArriveQty": 750, |
||||
|
// "receiptQty": 751, |
||||
|
// "putawayQty": 500, |
||||
|
// "maxQty": 500, |
||||
|
// "minQty": 60 |
||||
|
// }, |
||||
|
// ] |
||||
|
res.forEach(item=>{ |
||||
|
let _supplierName = item.supplierShortName && item.supplierShortName.length > 0 ? item.supplierShortName : item.supplierName |
||||
|
let _item = [] |
||||
|
_item[0] = _supplierName;//供应商名称 |
||||
|
_item[1] = item.itemCode;//ERP号 |
||||
|
_item[2] = item.itemName;//零件号 |
||||
|
_item[3] = item.itemDesc1;//物料描述 |
||||
|
_item[4] = item.arriveQty;//发货数量 |
||||
|
// _item[5] = item.planArriveQty;//计划数 |
||||
|
_item[5] = item.receiptQty;//实际数 |
||||
|
_item[6] = item.differQty;//差异数 |
||||
|
_item[7] = item.maxQty;//高储 |
||||
|
_item[8] = item.minQty;//低储 |
||||
|
// _item[4] = item.receiptNoteCount;//供应商当天已收单 |
||||
|
// _item[5] = item.supplierAsnCount;//供应商当天总到单 |
||||
|
// _item[6] = item.planArriveQty;//发货物料数量 |
||||
|
// _item[7] = item.receiptQty;//收货物料数量 |
||||
|
// _item[8] = item.putawayQty;//上架物料数量 |
||||
|
// _item[9] = item.maxQty;//高储数量 |
||||
|
// _item[10] = item.minQty;//低储数量 |
||||
|
rows.push(_item) |
||||
|
}) |
||||
|
this.initConfig(rows) |
||||
|
// this_.$refs['PAAscrollBoard'].updateRows(rows,0) //如果不需要刷新页面 不需要循环数据 追加数据用此方法 |
||||
|
}).catch(error => { |
||||
|
this.dataLoading = false |
||||
|
console.log(error) |
||||
|
}) |
||||
|
}, |
||||
|
// 头部时间更改操作 |
||||
|
headerDateChange(value){ |
||||
|
this.selectDate = value |
||||
|
this.init() |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="less"> |
||||
|
.planAndActualBoardPage{ |
||||
|
background: rgba(0, 44, 81, 1); |
||||
|
|
||||
|
.header-item{ |
||||
|
font-size: 1rem; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
.ceil{ |
||||
|
font-size: 1rem; |
||||
|
} |
||||
|
.dv-loading{ |
||||
|
color: #fff; |
||||
|
} |
||||
|
.lineContain{ |
||||
|
margin: 2rem; |
||||
|
height: calc(100vh - 10rem); |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,415 @@ |
|||||
|
<template> |
||||
|
<div class="boardFullPage"> |
||||
|
<boardHeader |
||||
|
:title="'库房信息指示屏'" |
||||
|
@headerDateChange="headerDateChange" |
||||
|
></boardHeader> |
||||
|
<dv-loading v-show="dataLoading">Loading...</dv-loading> |
||||
|
<div class="chartContain"> |
||||
|
<div class="oneRow"> |
||||
|
<div class="totalContain"> |
||||
|
<lineLightContain :lineClass="'box'"> |
||||
|
<template> |
||||
|
<div class="icon"><svg-icon icon-file-name="order"/></div> |
||||
|
<div class="val">{{leftSumQty || leftSumQty == 0 ? leftSumQty : "—"}}</div> |
||||
|
<!-- <div class="val">4260</div> --> |
||||
|
<div class="name">未处理订单数</div> |
||||
|
</template> |
||||
|
</lineLightContain> |
||||
|
</div> |
||||
|
<lineLightContain :lineClass="'chartBox'"> |
||||
|
<template> |
||||
|
<div class="box-title"><div class="name">未收货汇总</div><svg-icon icon-file-name="title-line"/></div> |
||||
|
<div class="echatCenterDataSum" v-if="leftEchatDataSum && leftEchatDataSum > 0 && !dataLoading"> |
||||
|
<p>汇总</p> |
||||
|
<p class="sum">{{leftEchatDataSum}}</p> |
||||
|
<!-- <p class="sum">4260</p> --> |
||||
|
</div> |
||||
|
<div class="myEchart" :class="[leftEchatData.length <= 0 && !dataLoading ? 'opacityHide' : '']" id="leftRingEchart"></div> |
||||
|
<!-- :class="[ringLeftConfig.data.length <= 0 && !dataLoading ? 'opacityHide' : '']" --> |
||||
|
<!-- <dv-active-ring-chart :config="ringLeftConfig" :style="{width:ringSize,height:ringSize}"/> --> |
||||
|
<div class="hasNoData" v-if="leftEchatData.length <= 0 && !dataLoading">暂无数据</div> |
||||
|
</template> |
||||
|
</lineLightContain> |
||||
|
</div> |
||||
|
<div class="oneRow"> |
||||
|
<div class="totalContain"> |
||||
|
<lineLightContain :lineClass="'box'"> |
||||
|
<template> |
||||
|
<div class="icon"><svg-icon icon-file-name="goods"/></div> |
||||
|
<div class="val">{{rightSumQty || rightSumQty == 0 ? rightSumQty : "—"}}</div> |
||||
|
<div class="name">待分配物料数</div> |
||||
|
</template> |
||||
|
</lineLightContain> |
||||
|
</div> |
||||
|
<lineLightContain :lineClass="'chartBox'"> |
||||
|
<template> |
||||
|
<div class="box-title"><div class="name">要货状态汇总</div><svg-icon icon-file-name="title-line"/></div> |
||||
|
<!-- v-if="rightEchatData.length > 0 && !dataLoading" --> |
||||
|
<div class="myEchart" :class="[rightEchatData.length <= 0 && !dataLoading ? 'opacityHide' : '']" id="rightRingEchart"></div> |
||||
|
<div class="hasNoData" v-if="rightEchatData.length <= 0 && !dataLoading">暂无数据</div> |
||||
|
<!-- <dv-active-ring-chart :config="ringRightConfig" :style="{width:ringSize,height:ringSize}"/> --> |
||||
|
</template> |
||||
|
</lineLightContain> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="bottomTable"> |
||||
|
<lineLightContain> |
||||
|
<template> |
||||
|
<div class="box-title"><div class="name">领料任务单明细</div><svg-icon icon-file-name="title-line"/></div> |
||||
|
<dv-scroll-board :config="tableConfig" ref="WSscrollBoard" style="height:calc(100% - 3.5rem)" /> |
||||
|
<div class="hasNoData" v-if="tableConfig.data.length <= 0 && !dataLoading">暂无数据</div> |
||||
|
</template> |
||||
|
</lineLightContain> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import axiosUtil from '../utils/request' |
||||
|
import boardHeader from '../components/boardHeader' |
||||
|
import lineLightContain from '../components/lineLightContain' |
||||
|
import util from '../utils/util' |
||||
|
import * as echarts from 'echarts' |
||||
|
export default { |
||||
|
name: 'warehouseBoard', |
||||
|
components:{boardHeader,lineLightContain}, |
||||
|
data () { |
||||
|
return { |
||||
|
selectDate:null,//头部选择时间 |
||||
|
dataLoading: true, |
||||
|
leftSumQty:null,//左侧总数 |
||||
|
rightSumQty:null,//右侧总数 |
||||
|
leftEchatData:[],//左侧环状图接口数据 |
||||
|
leftEchatDataSum:null,//左侧环状图接口数据总数 |
||||
|
rightEchatData:[],//左侧环状图接口数据 |
||||
|
// 环状图默认配置 |
||||
|
// ringDefultConfig:{ |
||||
|
// radius:'60%', |
||||
|
// activeRadius:"65%", |
||||
|
// // digitalFlopStyle: { |
||||
|
// // fontSize: 40 |
||||
|
// // }, |
||||
|
// showOriginValue: true, |
||||
|
// data:[], |
||||
|
// }, |
||||
|
// // 左侧环状图 |
||||
|
// ringLeftConfig:{}, |
||||
|
// //右侧环状图 |
||||
|
// ringRightConfig:{}, |
||||
|
// 滚动表格 |
||||
|
tableDefultConfig: { |
||||
|
header: ['单据号', '物料号', '物料描述', '箱码', '发货数量', '发货时间'], |
||||
|
data: [], |
||||
|
waitTime: util.waitTime, |
||||
|
carousel: 'page', |
||||
|
indexHeader: '序号', |
||||
|
index: true, |
||||
|
// columnWidth: [80], |
||||
|
columnWidth: [80,380,380,380,380,200,200], |
||||
|
align: ['center','left','left','center','center','center','center'], |
||||
|
hoverPause: false, // 鼠标悬浮时，不停止轮播 |
||||
|
rowNum: 10, |
||||
|
headerBGC: '#1981f6', |
||||
|
headerHeight: 35, |
||||
|
evenRowBGC: 'rgba(0, 44, 81, 0.9)', |
||||
|
oddRowBGC: 'rgba(10, 29, 50, 0.9)' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
this.initConfig() |
||||
|
util.addEventResizeFlesh() |
||||
|
|
||||
|
// this.initRingConfig("left",[ |
||||
|
// {name: '龙方科技',value: 150}, |
||||
|
// {name: '一汽恒威',value: 120}, |
||||
|
// {name: '重庆睿信汽车零部件',value: 78}, |
||||
|
// {name: '上海埃姆',value: 66}, |
||||
|
// {name: '逸韩机械科技',value:560}, |
||||
|
// {name: '上海磊拓',value: 230}, |
||||
|
// {name: '江苏泛亚微透',value: 180}, |
||||
|
// {name: '埃维尔汽车部件',value: 360}, |
||||
|
// {name: '上海耀春汽车零件',value: 160}, |
||||
|
// {name: '江苏力崛模塑',value: 420}, |
||||
|
// ]) |
||||
|
// this.initRingConfig("right",[ |
||||
|
// {name: '宝适汽车部件（太仓）',value: 400}, |
||||
|
// {name: '浙江华远汽车',value: 390}, |
||||
|
// {name: '广州信强汽车配件',value: 1500}, |
||||
|
// {name: '上海通领汽车科技',value: 280}, |
||||
|
// {name: '高士线业（深圳）',value: 1010}, |
||||
|
// {name: '重庆睿信汽车零部件',value: 120}, |
||||
|
// {name: '龙方科技',value: 650}, |
||||
|
// {name: '江苏力崛模塑',value: 300}, |
||||
|
// {name: '一汽恒威',value: 950}, |
||||
|
// {name: '上海磊拓',value: 600} |
||||
|
// ]) |
||||
|
|
||||
|
}, |
||||
|
destroyed() { |
||||
|
clearInterval(this.intervalId) |
||||
|
}, |
||||
|
mounted(){ |
||||
|
this.fleshAllData() |
||||
|
clearInterval(this.intervalId) |
||||
|
this.intervalId = setInterval(() => { |
||||
|
this.fleshAllData() |
||||
|
}, 300000)// 每5分钟获取一次数据 300000 |
||||
|
}, |
||||
|
methods: { |
||||
|
// 刷新所有信息 |
||||
|
fleshAllData(){ |
||||
|
this.dataLoading = true |
||||
|
Promise.all([ |
||||
|
this.getSumQty("left"), |
||||
|
this.getSumQty("right"), |
||||
|
this.initRingEchart("left"), |
||||
|
// this.initRingDataV("left"), |
||||
|
this.initRingEchart("right"), |
||||
|
// this.initRingDataV("right"), |
||||
|
this.getBottomList(), |
||||
|
]).then((res) => { |
||||
|
this.dataLoading = false |
||||
|
}).catch(()=>{ |
||||
|
this.dataLoading = false |
||||
|
}) |
||||
|
}, |
||||
|
// 获取左右表头数量 |
||||
|
/** |
||||
|
* right 如果有值则获取右侧数据 |
||||
|
*/ |
||||
|
getSumQty(type){ |
||||
|
let _url = type=='right' ? '/api/dashboard/material-request/un-issued-item-qty-sum' : '/api/dashboard/material-request/un-handled-order-sum' |
||||
|
// todo:this.selectDate |
||||
|
return axiosUtil.ajax_get(_url).then(res => { |
||||
|
if(type=="right"){ |
||||
|
this.rightSumQty = res.sum |
||||
|
}else{ |
||||
|
this.leftSumQty = res.sum |
||||
|
} |
||||
|
}).catch(error => { |
||||
|
console.log(error) |
||||
|
}) |
||||
|
}, |
||||
|
// 初始化环状图配置 |
||||
|
// initRingConfig(type,data){ |
||||
|
// let _config = { |
||||
|
// radius:this.ringDefultConfig.radius, |
||||
|
// activeRadius:this.ringDefultConfig.activeRadius, |
||||
|
// showOriginValue: this.ringDefultConfig.showOriginValue, |
||||
|
// data:data || [] |
||||
|
// } |
||||
|
// console.log(data) |
||||
|
// if(type == "left"){this.ringLeftConfig = _config} |
||||
|
// // if(type == "right"){this.ringRightConfig = _config} |
||||
|
// }, |
||||
|
// 获取环状图数据(左右包括) |
||||
|
// initRingDataV(type){ |
||||
|
// let _url = type=='left' ? '/api/dashboard/material-request/un-received-item-qty-by-item-list' : '/api/dashboard/material-request/item-qty-by-received-status-list' |
||||
|
// return axiosUtil.ajax_get(_url).then(res => { |
||||
|
// let _data = [] |
||||
|
// res.forEach(item=>{ |
||||
|
// let _item = { |
||||
|
// name:item.itemCode, |
||||
|
// value:item.sum, |
||||
|
// } |
||||
|
// if(type == "right"){ |
||||
|
// _item = { |
||||
|
// name:item.receivedStatus, |
||||
|
// value:item.sum, |
||||
|
// } |
||||
|
// } |
||||
|
// _data.push(_item) |
||||
|
// }) |
||||
|
// if(type == "left"){ |
||||
|
// _data = [ |
||||
|
// { value: 150, name: '00R0000FATY' }, |
||||
|
// { value: 100, name: '033-105K3K' }, |
||||
|
// { value: 300, name: 'CC301D0AXA12' }, |
||||
|
// { value: 1000, name: '1565009RAB' }, |
||||
|
// { value: 100, name: '2254227NAB' }, |
||||
|
// { value: 450, name: '1560143NAA' }, |
||||
|
// { value: 1000, name: '3254142RAC' }, |
||||
|
// { value: 100, name: '1554222NAB' }, |
||||
|
// { value: 800, name: '2251053RAA' }, |
||||
|
// { value: 260, name: '4261142NAA' }, |
||||
|
// ] |
||||
|
// } |
||||
|
// this.initRingConfig(type,_data) |
||||
|
// }).catch(error => { |
||||
|
// console.log(error) |
||||
|
// }) |
||||
|
// }, |
||||
|
// 获取环状图数据-左右(echart) |
||||
|
initRingEchart(type){ |
||||
|
let _url = type=='left' ? '/api/dashboard/material-request/un-received-item-qty-by-item-list' : '/api/dashboard/material-request/item-qty-by-received-status-list' |
||||
|
// todo:this.selectDate |
||||
|
return axiosUtil.ajax_get(_url).then(res => { |
||||
|
let _data = [] |
||||
|
let _total = 0 |
||||
|
res.forEach(item=>{ |
||||
|
let _item = { |
||||
|
name:item.itemCode, |
||||
|
value:item.sum, |
||||
|
} |
||||
|
_total += Number(item.sum) |
||||
|
if(type == "right"){ |
||||
|
_item = { |
||||
|
name:item.receivedStatus, |
||||
|
value:item.sum, |
||||
|
} |
||||
|
} |
||||
|
_data.push(_item) |
||||
|
}) |
||||
|
let _radio = null |
||||
|
if(type == "left"){ |
||||
|
_radio = ["50%","70%"] |
||||
|
this.leftEchatData=res |
||||
|
this.leftEchatDataSum = _total |
||||
|
}else{ |
||||
|
_radio = "70%" |
||||
|
this.rightEchatData=res |
||||
|
} |
||||
|
// 假数据 |
||||
|
// if(type == "left"){ |
||||
|
// _data = [ |
||||
|
// { value: 150, name: '00R0000FATY' }, |
||||
|
// { value: 100, name: '033-105K3K' }, |
||||
|
// { value: 300, name: 'CC301D0AXA12' }, |
||||
|
// { value: 1000, name: '1565009RAB' }, |
||||
|
// { value: 100, name: '2254227NAB' }, |
||||
|
// { value: 450, name: '1560143NAA' }, |
||||
|
// { value: 1000, name: '3254142RAC' }, |
||||
|
// { value: 100, name: '1554222NAB' }, |
||||
|
// { value: 800, name: '2251053RAA' }, |
||||
|
// { value: 260, name: '4261142NAA' }, |
||||
|
// ] |
||||
|
// this.leftEchatData=_data |
||||
|
// } |
||||
|
// 基于准备好的dom，初始化echarts实例 |
||||
|
let myChart = null |
||||
|
myChart = echarts.init(document.getElementById(type+'RingEchart')) |
||||
|
|
||||
|
let option = { |
||||
|
tooltip: { |
||||
|
trigger: 'item' |
||||
|
}, |
||||
|
animationDuration:3000, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: 'Access From', |
||||
|
type: 'pie', |
||||
|
radius: _radio, |
||||
|
data: _data, |
||||
|
label: { |
||||
|
alignTo: 'edge', |
||||
|
formatter: '{name|{b}}\n{number|{c}}', |
||||
|
minMargin: 5, |
||||
|
edgeDistance: 10, |
||||
|
lineHeight: 15, |
||||
|
rich: { |
||||
|
name:{ |
||||
|
fontSize: 14, |
||||
|
color: '#fff' |
||||
|
}, |
||||
|
number: { |
||||
|
fontSize: 12, |
||||
|
color: '#fff' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
} |
||||
|
] |
||||
|
}; |
||||
|
// 绘制图表 |
||||
|
myChart.setOption(option); |
||||
|
// window.addEventListener('resize',function(){ |
||||
|
// myChart.resize() |
||||
|
// }) |
||||
|
}).catch(error => { |
||||
|
console.log(error) |
||||
|
}) |
||||
|
}, |
||||
|
// 初始化table表头配置 |
||||
|
initConfig(data){ |
||||
|
this.tableConfig = { |
||||
|
header: this.tableDefultConfig.header, |
||||
|
data: data || [], |
||||
|
waitTime: this.tableDefultConfig.waitTime,//每页停留20秒 |
||||
|
indexHeader:this.tableDefultConfig.indexHeader, |
||||
|
index: this.tableDefultConfig.index, |
||||
|
carousel: this.tableDefultConfig.carousel, |
||||
|
columnWidth: this.tableDefultConfig.columnWidth, |
||||
|
align: this.tableDefultConfig.align, |
||||
|
hoverPause: this.tableDefultConfig.hoverPause, // 鼠标悬浮时，不停止轮播 |
||||
|
rowNum: this.tableDefultConfig.rowNum, |
||||
|
headerBGC: this.tableDefultConfig.headerBGC, |
||||
|
headerHeight: this.tableDefultConfig.headerHeight, |
||||
|
oddRowBGC: this.tableDefultConfig.oddRowBGC, |
||||
|
evenRowBGC: this.tableDefultConfig.evenRowBGC |
||||
|
} |
||||
|
}, |
||||
|
// table数据 |
||||
|
async getBottomList(){ |
||||
|
// 假数据 |
||||
|
// let rows = [ |
||||
|
// ['高士线业（深圳）', '4261013NAA', 'P20221117000065', 'LC5B S04565 BA3ZHE', '11', '2022-01-22 10:38'], |
||||
|
// ['上海通领汽车科技', '3254044LAC', 'P20221117000054', 'MA1B 7823943 DCH3GRX', '650', '2022-01-30 08:46'], |
||||
|
// ['广州信强汽车配件', '4261164NAA', 'P20221117000068', 'L2CB S044L96 AKC1', '150', '2022-03-16 14:06'], |
||||
|
// ['浙江华远汽车', '4261147NAA', 'P20221117000069', 'L2CB-S044L96-ALUV', '530', '2022-05-20 22:22'], |
||||
|
// ['宝适汽车部件（太仓）', '2261171NAA', 'P20221117000076', 'LC5B 80A212 A', '210', '2022-05-28 11:40'], |
||||
|
// ['江苏力崛模塑', '4261142NAA', 'P20221117000079', 'LC5B-S044L96-BLU4', '400', '2022-06-02 05:30'], |
||||
|
// ['上海耀春汽车零件', '2251053RAA', 'P20221117000080', 'BRKTFRTDRI/SPLHLRH', '1500', '2022-06-30 07:42'], |
||||
|
// ['埃维尔汽车部件', '1554222NAB', 'P20221117000082', 'LJ7T 18A802 EF', '820', '2022-07-10 10:10'], |
||||
|
// ['江苏泛亚微透', '3254142RAC', 'P20221117000085', 'MA1B 14A567 AB3JA6', '1550', '2022-07-20 10:28'], |
||||
|
// ['逸韩机械科技', '1560143NAA', 'P20221117000086', 'N2CB S044K67 AASM02', '750', '2022-07-22 09:08'], |
||||
|
// ['上海磊拓', '2254227NAB', 'P20221117000089', 'MA1B R044F62 AAZHE', '650', '2022-07-28 15:58'], |
||||
|
// ['上海埃姆', '1565009RAB', 'P20221117000092', 'JB5T 14017 CC3JA61', '550', '2022-07-30 10:38'], |
||||
|
// ['重庆睿信汽车零部件', '00R0000FATY', 'P20221117000098', 'P000000000003086', '120', '2022-08-01 15:30'], |
||||
|
// ['一汽恒威', 'CC301D0AXA12', 'P20221117000099', 'P000000000000548', '950', '2022-08-05 05:52'], |
||||
|
// ['龙方科技', '033-105K3K', 'P20221117000105', 'P000000000003166', '1200', '2022-08-12 16:30'], |
||||
|
// ] |
||||
|
// todo:this.selectDate |
||||
|
return axiosUtil.ajax_get('/api/dashboard/material-request/un-received-item-list').then(res => { |
||||
|
if(res.length <= 0){ |
||||
|
return |
||||
|
} |
||||
|
let rows = [] |
||||
|
res.forEach(item=>{ |
||||
|
let _item = [] |
||||
|
_item[0] = item.number;//单据号 |
||||
|
_item[1] = item.itemCode;//物料号 |
||||
|
_item[2] = item.itemDesc1;//物料描述" |
||||
|
_item[3] = item.packingCode;//箱码 |
||||
|
_item[4] = item.issuedQty;//发货数量 |
||||
|
_item[5] = item.issuedTime;//发货时间 |
||||
|
rows.push(_item) |
||||
|
}) |
||||
|
this.initConfig(rows) |
||||
|
}).catch(error => { |
||||
|
console.log(error) |
||||
|
}) |
||||
|
}, |
||||
|
// 头部时间更改操作 |
||||
|
headerDateChange(value){ |
||||
|
this.selectDate = value |
||||
|
this.fleshAllData() |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped lang="less"> |
||||
|
.bottomTable { |
||||
|
margin: 1rem; |
||||
|
margin-top: 1.5rem; |
||||
|
position: relative; |
||||
|
height: calc(54vh - 3rem); |
||||
|
.box-title{ |
||||
|
margin-bottom: 1.2rem; |
||||
|
} |
||||
|
.lineLightContain-outer{ |
||||
|
width: calc(100%); |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,101 @@ |
|||||
|
/** |
||||
|
* 配置参考: https://cli.vuejs.org/zh/config/
|
||||
|
*/ |
||||
|
|
||||
|
var webpack = require('webpack'); |
||||
|
const path = require('path') |
||||
|
const pxtovw = require('postcss-px-to-viewport'); |
||||
|
function resolve(dir) { |
||||
|
return path.join(__dirname, dir) |
||||
|
} |
||||
|
|
||||
|
module.exports = { |
||||
|
publicPath: process.env.NODE_ENV === 'production' ? './' : '/', |
||||
|
chainWebpack: config => { |
||||
|
const svgRule = config.module.rule('svg') |
||||
|
svgRule.uses.clear() |
||||
|
svgRule |
||||
|
.test(/\.svg$/) |
||||
|
.use('svg-sprite-loader') |
||||
|
.loader('svg-sprite-loader') |
||||
|
|
||||
|
// svg图标加载
|
||||
|
config.module |
||||
|
.rule('svg') |
||||
|
.exclude.add(resolve('src/assets/svg/icons')) |
||||
|
.end() |
||||
|
|
||||
|
config.module |
||||
|
.rule('icons')// 定义一个名叫 icons 的规则
|
||||
|
.test(/\.svg$/)// 设置 icons 的匹配正则
|
||||
|
.include.add(resolve('src/assets/svg/icons'))// 设置当前规则的作用目录，只在当前目录下才执行当前规则
|
||||
|
.end() |
||||
|
.use('svg-sprite')// 指定一个名叫 svg-sprite 的 loader 配置
|
||||
|
.loader('svg-sprite-loader')// 该配置使用 svg-sprite-loader 作为处理 loader
|
||||
|
.options({// 该 svg-sprite-loader 的配置
|
||||
|
symbolId:'icon-[name]' |
||||
|
}) |
||||
|
.end() |
||||
|
}, |
||||
|
|
||||
|
configureWebpack: { |
||||
|
resolve: { |
||||
|
alias: { |
||||
|
'@': resolve('src') |
||||
|
} |
||||
|
}, |
||||
|
plugins: [], |
||||
|
}, |
||||
|
// eslint : false,
|
||||
|
// 默认打开eslint效验，如果需要关闭，设置成false即可
|
||||
|
lintOnSave: false, |
||||
|
productionSourceMap: false, |
||||
|
devServer: { |
||||
|
open: true, |
||||
|
port: 8082, |
||||
|
https: false, |
||||
|
hotOnly: false, |
||||
|
overlay: { |
||||
|
errors: true, |
||||
|
warnings: true |
||||
|
}, |
||||
|
// proxy: {
|
||||
|
// '/asn': {
|
||||
|
// target: 'http://192.168.0.67:8081',
|
||||
|
// changeOrigin: true,
|
||||
|
// // logLevel: 'debug',
|
||||
|
// pathRewrite: {
|
||||
|
// '^/asn': ''
|
||||
|
// }
|
||||
|
// }
|
||||
|
// }
|
||||
|
}, |
||||
|
css: { |
||||
|
loaderOptions: { |
||||
|
sass: { |
||||
|
//给sass-loader传递选项
|
||||
|
}, |
||||
|
css: { |
||||
|
//给css-loader传递选项
|
||||
|
}, |
||||
|
postcss: { |
||||
|
//给postcss-loader传递选项
|
||||
|
plugins: [ |
||||
|
new pxtovw({ |
||||
|
unitToConvert: 'px', //需要转换的单位，默认为"px"；
|
||||
|
viewportWidth: 375, //设计稿的视口宽度
|
||||
|
unitPrecision: 5, //单位转换后保留的小数位数
|
||||
|
propList: ['*'], //要进行转换的属性列表,*表示匹配所有,!表示不转换
|
||||
|
viewportUnit: 'vw', //转换后的视口单位
|
||||
|
fontViewportUnit: 'vw', //转换后字体使用的视口单位
|
||||
|
selectorBlackList: [], //不进行转换的css选择器，继续使用原有单位
|
||||
|
minPixelValue: 1, //设置最小的转换数值
|
||||
|
mediaQuery: false, //设置媒体查询里的单位是否需要转换单位
|
||||
|
replace: true, //是否直接更换属性值，而不添加备用属性
|
||||
|
exclude: [/node_modules/] //忽略某些文件夹下的文件
|
||||
|
}) |
||||
|
] |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue