33 changed files with 30460 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,82 @@ |
|||
<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 |
|||
this.timer = setInterval(() => { |
|||
let _res = new Date() |
|||
_res += 1000 |
|||
_this.time = dateUtil.getnowDay() + ' ' + dateUtil.getnowTime() |
|||
},1000) |
|||
this.time = dateUtil.getnowDay() + ' ' + dateUtil.getnowTime() |
|||
// 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) |
|||
// }) |
|||
}, |
|||
// 时间更改操作 |
|||
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,51 @@ |
|||
import Vue from 'vue' |
|||
import VueRouter from 'vue-router' |
|||
import Home from '../views/Home.vue' |
|||
import stockBoard from '../views/stockBoard' |
|||
import dateUtil from '../utils/dateUtil' |
|||
|
|||
Vue.use(VueRouter) |
|||
|
|||
const routes = [ |
|||
{ |
|||
path: '/', |
|||
name: 'Home', |
|||
component: Home |
|||
}, |
|||
// 纳入计划与实际看板
|
|||
{ |
|||
path: '/stockBoard', |
|||
name: 'stockBoard', |
|||
component: stockBoard, |
|||
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,68 @@ |
|||
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() |
|||
} |
|||
|
|||
/** |
|||
* 获取当前时间 yyyy-dd-mm todo:待测试 |
|||
* @param {*} value 时间戳 |
|||
* @returns |
|||
*/ |
|||
var getnowDay = function (value){ |
|||
let date = new Date() |
|||
let seperator = '-' |
|||
let newDate = value ? new Date(value) : 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() |
|||
} |
|||
|
|||
/** |
|||
* 获取当前时间 hh:mm:ss |
|||
* @param {*} value 时间戳 |
|||
* @returns |
|||
*/ |
|||
var getnowTime = function (value){ |
|||
let date = new Date() |
|||
let seperator = ':' |
|||
let newDate = value ? new Date(value) : 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) |
|||
}).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,30 @@ |
|||
<template> |
|||
<div class="nav"> |
|||
<div class="item"><el-button type="primary" plain><a href="/#/stockBoard">备料看板</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,335 @@ |
|||
<template> |
|||
<div class="boardFullPage stockBoardPage"> |
|||
<boardHeader |
|||
ref="boardHeader_Ref" |
|||
:title="'备料看板'" |
|||
></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' |
|||
export default { |
|||
name: 'stockBoard', |
|||
components:{boardHeader}, |
|||
data () { |
|||
return { |
|||
dataLoading: true, |
|||
// config默认项 |
|||
configDefult:{ |
|||
header:['物料', '描述', '数量', '需求库位', '状态' ], |
|||
waitTime: util.waitTime,//每页停留20秒d |
|||
carousel: 'page', |
|||
// index: true, |
|||
// indexHeader: '序号', |
|||
columnWidth: [660,660,280,280,280], |
|||
align: ['left','left','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() |
|||
// 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 = [ |
|||
{ |
|||
"itemCode": "294FL047", |
|||
"itemName": "294项目左前门", |
|||
"qty": 65, |
|||
"locationCode": 'WIP', |
|||
"status": '紧急' |
|||
}, |
|||
{ |
|||
"itemCode": "294RL005", |
|||
"itemName": "294项目左后门", |
|||
"qty": 23, |
|||
"locationCode": 'FG', |
|||
"status": '紧急' |
|||
}, |
|||
{ |
|||
"itemCode": "294RR027", |
|||
"itemName": "294项目右后门", |
|||
"qty": 60, |
|||
"locationCode": 'WIP', |
|||
"status": '正常' |
|||
}, |
|||
{ |
|||
"itemCode": "294RL005", |
|||
"itemName": "294项目左后门", |
|||
"qty": 80, |
|||
"locationCode": 'FG', |
|||
"status": '正常' |
|||
}, |
|||
{ |
|||
"itemCode": "254FR005", |
|||
"itemName": "254项目右前门", |
|||
"qty": 20, |
|||
"locationCode": 'FG', |
|||
"status": '紧急' |
|||
}, |
|||
{ |
|||
"itemCode": "254FL036", |
|||
"itemName": "254项目左前门", |
|||
"qty": 30, |
|||
"locationCode": 'FG', |
|||
"status": '正常' |
|||
}, |
|||
{ |
|||
"itemCode": "L0385670AA_1D03", |
|||
"itemName": "IP HUD WSS HIGH 1D03 L0385670AA 1D03", |
|||
"qty": 10, |
|||
"locationCode": 'SH', |
|||
"status": '正常' |
|||
}, |
|||
{ |
|||
"itemCode": "V01", |
|||
"itemName": "scrap item. ", |
|||
"qty": 16, |
|||
"locationCode": 'SH', |
|||
"status": '正常' |
|||
}, |
|||
{ |
|||
"itemCode": "41300016AA", |
|||
"itemName": "PVC KL NAPPAO BLANK19K21 L0387018AA", |
|||
"qty": 20, |
|||
"locationCode": 'SALE', |
|||
"status": '紧急' |
|||
}, |
|||
{ |
|||
"itemCode": "294FL047", |
|||
"itemName": "294项目左前门", |
|||
"qty": 65, |
|||
"locationCode": 'WIP', |
|||
"status": '紧急' |
|||
}, |
|||
{ |
|||
"itemCode": "294RL005", |
|||
"itemName": "294项目左后门", |
|||
"qty": 23, |
|||
"locationCode": 'FG', |
|||
"status": '紧急' |
|||
}, |
|||
{ |
|||
"itemCode": "294RR027", |
|||
"itemName": "294项目右后门", |
|||
"qty": 60, |
|||
"locationCode": 'WIP', |
|||
"status": '正常' |
|||
}, |
|||
{ |
|||
"itemCode": "294RL005", |
|||
"itemName": "294项目左后门", |
|||
"qty": 80, |
|||
"locationCode": 'FG', |
|||
"status": '正常' |
|||
}, |
|||
{ |
|||
"itemCode": "254FR005", |
|||
"itemName": "254项目右前门", |
|||
"qty": 20, |
|||
"locationCode": 'FG', |
|||
"status": '紧急' |
|||
}, |
|||
{ |
|||
"itemCode": "254FL036", |
|||
"itemName": "254项目左前门", |
|||
"qty": 30, |
|||
"locationCode": 'FG', |
|||
"status": '正常' |
|||
}, |
|||
{ |
|||
"itemCode": "L0385670AA_1D03", |
|||
"itemName": "IP HUD WSS HIGH 1D03 L0385670AA 1D03", |
|||
"qty": 10, |
|||
"locationCode": 'SH', |
|||
"status": '正常' |
|||
}, |
|||
{ |
|||
"itemCode": "V01", |
|||
"itemName": "scrap item. ", |
|||
"qty": 16, |
|||
"locationCode": 'SH', |
|||
"status": '正常' |
|||
}, |
|||
{ |
|||
"itemCode": "41300016AA", |
|||
"itemName": "PVC KL NAPPAO BLANK19K21 L0387018AA", |
|||
"qty": 20, |
|||
"locationCode": 'SALE', |
|||
"status": '紧急' |
|||
}, |
|||
{ |
|||
"itemCode": "294FL047", |
|||
"itemName": "294项目左前门", |
|||
"qty": 65, |
|||
"locationCode": 'WIP', |
|||
"status": '紧急' |
|||
}, |
|||
{ |
|||
"itemCode": "294RL005", |
|||
"itemName": "294项目左后门", |
|||
"qty": 23, |
|||
"locationCode": 'FG', |
|||
"status": '紧急' |
|||
}, |
|||
{ |
|||
"itemCode": "294RR027", |
|||
"itemName": "294项目右后门", |
|||
"qty": 60, |
|||
"locationCode": 'WIP', |
|||
"status": '正常' |
|||
}, |
|||
{ |
|||
"itemCode": "294RL005", |
|||
"itemName": "294项目左后门", |
|||
"qty": 80, |
|||
"locationCode": 'FG', |
|||
"status": '正常' |
|||
}, |
|||
{ |
|||
"itemCode": "254FR005", |
|||
"itemName": "254项目右前门", |
|||
"qty": 20, |
|||
"locationCode": 'FG', |
|||
"status": '紧急' |
|||
}, |
|||
{ |
|||
"itemCode": "254FL036", |
|||
"itemName": "254项目左前门", |
|||
"qty": 30, |
|||
"locationCode": 'FG', |
|||
"status": '正常' |
|||
}, |
|||
{ |
|||
"itemCode": "L0385670AA_1D03", |
|||
"itemName": "IP HUD WSS HIGH 1D03 L0385670AA 1D03", |
|||
"qty": 10, |
|||
"locationCode": 'SH', |
|||
"status": '正常' |
|||
}, |
|||
{ |
|||
"itemCode": "V01", |
|||
"itemName": "scrap item. ", |
|||
"qty": 16, |
|||
"locationCode": 'SH', |
|||
"status": '正常' |
|||
}, |
|||
{ |
|||
"itemCode": "41300016AA", |
|||
"itemName": "PVC KL NAPPAO BLANK19K21 L0387018AA", |
|||
"qty": 20, |
|||
"locationCode": 'SALE', |
|||
"status": '紧急' |
|||
}, |
|||
] |
|||
_res.forEach(item=>{ |
|||
let _item = [] |
|||
_item[0] = item.itemCode;//物料 |
|||
_item[1] = item.itemName;//描述 |
|||
_item[2] = item.qty;//数量 |
|||
_item[3] = item.locationCode;//需求库位 |
|||
if(item.status == '紧急'){ |
|||
_item[4] = `<span class="statusItem statusItem_warning">${item.status}</span>`;//状态 |
|||
}else{ |
|||
_item[4] = `<span class="statusItem statusItem_normal">${item.status}</span>`;//状态 |
|||
} |
|||
rows.push(_item) |
|||
}) |
|||
this.initConfig(rows) |
|||
// this_.$refs['PAAscrollBoard'].updateRows(rows,0) //如果不需要刷新页面 不需要循环数据 追加数据用此方法 |
|||
// }).catch(error => { |
|||
// this.dataLoading = false |
|||
// console.log(error) |
|||
// }) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less"> |
|||
.stockBoardPage{ |
|||
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); |
|||
} |
|||
.statusItem{ |
|||
padding:0.5rem 1.5rem; |
|||
color:#fff; |
|||
border-radius:0.1rem |
|||
} |
|||
.statusItem_warning{ |
|||
background:#ff2626 |
|||
} |
|||
.statusItem_normal{ |
|||
background:#28b119 |
|||
} |
|||
} |
|||
</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