13 changed files with 455 additions and 620 deletions
-
2src/App.vue
-
4src/api/board.js
-
4src/router/index.js
-
472src/views/demo/echarts.vue
-
65src/views/demo/ueditor.vue
-
206src/views/modules/board/delNotifyBoard.vue
-
107src/views/modules/board/newScheduledBoard.vue
-
184src/views/modules/board/scheduleListBoard.vue
-
5src/views/modules/production/dailyPlan.vue
-
5src/views/modules/production/search_schedule.vue
-
2static/config/init.js
-
1static/plugins/echarts-3.8.5/echarts.common.min.js
-
18static/plugins/echarts-5.3.1/echarts.min.js
@ -1,472 +0,0 @@ |
|||
<template> |
|||
<div class="mod-demo-echarts"> |
|||
<el-alert |
|||
title="提示：" |
|||
type="warning" |
|||
:closable="false"> |
|||
<div slot-scope="description"> |
|||
<p class="el-alert__description">1. 此Demo只提供ECharts官方使用文档，入门部署和体验功能。具体使用请参考：http://echarts.baidu.com/index.html</p> |
|||
</div> |
|||
</el-alert> |
|||
|
|||
<el-row :gutter="20"> |
|||
<el-col :span="24"> |
|||
<el-card> |
|||
<div id="J_chartLineBox" class="chart-box"></div> |
|||
</el-card> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<el-card> |
|||
<div id="J_chartBarBox" class="chart-box"></div> |
|||
</el-card> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-card> |
|||
<div id="J_chartPieBox" class="chart-box"></div> |
|||
</el-card> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-card> |
|||
<div id="J_chartScatterBox" class="chart-box"></div> |
|||
</el-card> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import echarts from 'echarts' |
|||
export default { |
|||
data () { |
|||
return { |
|||
chartLine: null, |
|||
chartBar: null, |
|||
chartPie: null, |
|||
chartScatter: null |
|||
} |
|||
}, |
|||
mounted () { |
|||
this.initChartLine() |
|||
this.initChartBar() |
|||
this.initChartPie() |
|||
this.initChartScatter() |
|||
}, |
|||
activated () { |
|||
// 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug |
|||
if (this.chartLine) { |
|||
this.chartLine.resize() |
|||
} |
|||
if (this.chartBar) { |
|||
this.chartBar.resize() |
|||
} |
|||
if (this.chartPie) { |
|||
this.chartPie.resize() |
|||
} |
|||
if (this.chartScatter) { |
|||
this.chartScatter.resize() |
|||
} |
|||
}, |
|||
methods: { |
|||
// 折线图 |
|||
initChartLine () { |
|||
var option = { |
|||
'title': { |
|||
'text': '折线图堆叠' |
|||
}, |
|||
'tooltip': { |
|||
'trigger': 'axis' |
|||
}, |
|||
'legend': { |
|||
'data': [ '邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎' ] |
|||
}, |
|||
'grid': { |
|||
'left': '3%', |
|||
'right': '4%', |
|||
'bottom': '3%', |
|||
'containLabel': true |
|||
}, |
|||
'toolbox': { |
|||
'feature': { |
|||
'saveAsImage': { } |
|||
} |
|||
}, |
|||
'xAxis': { |
|||
'type': 'category', |
|||
'boundaryGap': false, |
|||
'data': [ '周一', '周二', '周三', '周四', '周五', '周六', '周日' ] |
|||
}, |
|||
'yAxis': { |
|||
'type': 'value' |
|||
}, |
|||
'series': [ |
|||
{ |
|||
'name': '邮件营销', |
|||
'type': 'line', |
|||
'stack': '总量', |
|||
'data': [ 120, 132, 101, 134, 90, 230, 210 ] |
|||
}, |
|||
{ |
|||
'name': '联盟广告', |
|||
'type': 'line', |
|||
'stack': '总量', |
|||
'data': [ 220, 182, 191, 234, 290, 330, 310 ] |
|||
}, |
|||
{ |
|||
'name': '视频广告', |
|||
'type': 'line', |
|||
'stack': '总量', |
|||
'data': [ 150, 232, 201, 154, 190, 330, 410 ] |
|||
}, |
|||
{ |
|||
'name': '直接访问', |
|||
'type': 'line', |
|||
'stack': '总量', |
|||
'data': [ 320, 332, 301, 334, 390, 330, 320 ] |
|||
}, |
|||
{ |
|||
'name': '搜索引擎', |
|||
'type': 'line', |
|||
'stack': '总量', |
|||
'data': [ 820, 932, 901, 934, 1290, 1330, 1320 ] |
|||
} |
|||
] |
|||
} |
|||
this.chartLine = echarts.init(document.getElementById('J_chartLineBox')) |
|||
this.chartLine.setOption(option) |
|||
window.addEventListener('resize', () => { |
|||
this.chartLine.resize() |
|||
}) |
|||
}, |
|||
// 柱状图 |
|||
initChartBar () { |
|||
var option = { |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
type: 'shadow' |
|||
} |
|||
}, |
|||
legend: { |
|||
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎', '百度', '谷歌', '必应', '其他'] |
|||
}, |
|||
grid: { |
|||
left: '3%', |
|||
right: '4%', |
|||
bottom: '3%', |
|||
containLabel: true |
|||
}, |
|||
xAxis: [ |
|||
{ |
|||
type: 'category', |
|||
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] |
|||
} |
|||
], |
|||
yAxis: [ |
|||
{ |
|||
type: 'value' |
|||
} |
|||
], |
|||
series: [ |
|||
{ |
|||
name: '直接访问', |
|||
type: 'bar', |
|||
data: [320, 332, 301, 334, 390, 330, 320] |
|||
}, |
|||
{ |
|||
name: '邮件营销', |
|||
type: 'bar', |
|||
stack: '广告', |
|||
data: [120, 132, 101, 134, 90, 230, 210] |
|||
}, |
|||
{ |
|||
name: '联盟广告', |
|||
type: 'bar', |
|||
stack: '广告', |
|||
data: [220, 182, 191, 234, 290, 330, 310] |
|||
}, |
|||
{ |
|||
name: '视频广告', |
|||
type: 'bar', |
|||
stack: '广告', |
|||
data: [150, 232, 201, 154, 190, 330, 410] |
|||
}, |
|||
{ |
|||
name: '搜索引擎', |
|||
type: 'bar', |
|||
data: [862, 1018, 964, 1026, 1679, 1600, 1570], |
|||
markLine: { |
|||
lineStyle: { |
|||
normal: { |
|||
type: 'dashed' |
|||
} |
|||
}, |
|||
data: [ |
|||
[{ type: 'min' }, { type: 'max' }] |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
name: '百度', |
|||
type: 'bar', |
|||
barWidth: 5, |
|||
stack: '搜索引擎', |
|||
data: [620, 732, 701, 734, 1090, 1130, 1120] |
|||
}, |
|||
{ |
|||
name: '谷歌', |
|||
type: 'bar', |
|||
stack: '搜索引擎', |
|||
data: [120, 132, 101, 134, 290, 230, 220] |
|||
}, |
|||
{ |
|||
name: '必应', |
|||
type: 'bar', |
|||
stack: '搜索引擎', |
|||
data: [60, 72, 71, 74, 190, 130, 110] |
|||
}, |
|||
{ |
|||
name: '其他', |
|||
type: 'bar', |
|||
stack: '搜索引擎', |
|||
data: [62, 82, 91, 84, 109, 110, 120] |
|||
} |
|||
] |
|||
} |
|||
this.chartBar = echarts.init(document.getElementById('J_chartBarBox')) |
|||
this.chartBar.setOption(option) |
|||
window.addEventListener('resize', () => { |
|||
this.chartBar.resize() |
|||
}) |
|||
}, |
|||
// 饼状图 |
|||
initChartPie () { |
|||
var option = { |
|||
backgroundColor: '#2c343c', |
|||
title: { |
|||
text: 'Customized Pie', |
|||
left: 'center', |
|||
top: 20, |
|||
textStyle: { |
|||
color: '#ccc' |
|||
} |
|||
}, |
|||
tooltip: { |
|||
trigger: 'item', |
|||
formatter: '{a} <br/>{b} : {c} ({d}%)' |
|||
}, |
|||
visualMap: { |
|||
show: false, |
|||
min: 80, |
|||
max: 600, |
|||
inRange: { |
|||
colorLightness: [0, 1] |
|||
} |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: '访问来源', |
|||
type: 'pie', |
|||
radius: '55%', |
|||
center: ['50%', '50%'], |
|||
data: [ |
|||
{ value: 335, name: '直接访问' }, |
|||
{ value: 310, name: '邮件营销' }, |
|||
{ value: 274, name: '联盟广告' }, |
|||
{ value: 235, name: '视频广告' }, |
|||
{ value: 400, name: '搜索引擎' } |
|||
].sort(function (a, b) { return a.value - b.value }), |
|||
roseType: 'radius', |
|||
label: { |
|||
normal: { |
|||
textStyle: { |
|||
color: 'rgba(255, 255, 255, 0.3)' |
|||
} |
|||
} |
|||
}, |
|||
labelLine: { |
|||
normal: { |
|||
lineStyle: { |
|||
color: 'rgba(255, 255, 255, 0.3)' |
|||
}, |
|||
smooth: 0.2, |
|||
length: 10, |
|||
length2: 20 |
|||
} |
|||
}, |
|||
itemStyle: { |
|||
normal: { |
|||
color: '#c23531', |
|||
shadowBlur: 200, |
|||
shadowColor: 'rgba(0, 0, 0, 0.5)' |
|||
} |
|||
}, |
|||
animationType: 'scale', |
|||
animationEasing: 'elasticOut', |
|||
animationDelay: function (idx) { |
|||
return Math.random() * 200 |
|||
} |
|||
} |
|||
] |
|||
} |
|||
this.chartPie = echarts.init(document.getElementById('J_chartPieBox')) |
|||
this.chartPie.setOption(option) |
|||
window.addEventListener('resize', () => { |
|||
this.chartPie.resize() |
|||
}) |
|||
}, |
|||
// 散点图 |
|||
initChartScatter () { |
|||
var option = { |
|||
backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [ |
|||
{ offset: 0, color: '#f7f8fa' }, |
|||
{ offset: 1, color: '#cdd0d5' } |
|||
]), |
|||
title: { |
|||
text: '1990 与 2015 年各国家人均寿命与 GDP' |
|||
}, |
|||
legend: { |
|||
right: 10, |
|||
data: ['1990', '2015'] |
|||
}, |
|||
xAxis: { |
|||
splitLine: { |
|||
lineStyle: { |
|||
type: 'dashed' |
|||
} |
|||
} |
|||
}, |
|||
yAxis: { |
|||
splitLine: { |
|||
lineStyle: { |
|||
type: 'dashed' |
|||
} |
|||
}, |
|||
scale: true |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: '1990', |
|||
data: [ |
|||
[28604, 77, 17096869, 'Australia', 1990], |
|||
[31163, 77.4, 27662440, 'Canada', 1990], |
|||
[1516, 68, 1154605773, 'China', 1990], |
|||
[13670, 74.7, 10582082, 'Cuba', 1990], |
|||
[28599, 75, 4986705, 'Finland', 1990], |
|||
[29476, 77.1, 56943299, 'France', 1990], |
|||
[31476, 75.4, 78958237, 'Germany', 1990], |
|||
[28666, 78.1, 254830, 'Iceland', 1990], |
|||
[1777, 57.7, 870601776, 'India', 1990], |
|||
[29550, 79.1, 122249285, 'Japan', 1990], |
|||
[2076, 67.9, 20194354, 'North Korea', 1990], |
|||
[12087, 72, 42972254, 'South Korea', 1990], |
|||
[24021, 75.4, 3397534, 'New Zealand', 1990], |
|||
[43296, 76.8, 4240375, 'Norway', 1990], |
|||
[10088, 70.8, 38195258, 'Poland', 1990], |
|||
[19349, 69.6, 147568552, 'Russia', 1990], |
|||
[10670, 67.3, 53994605, 'Turkey', 1990], |
|||
[26424, 75.7, 57110117, 'United Kingdom', 1990], |
|||
[37062, 75.4, 252847810, 'United States', 1990] |
|||
], |
|||
type: 'scatter', |
|||
symbolSize: function (data) { |
|||
return Math.sqrt(data[2]) / 5e2 |
|||
}, |
|||
label: { |
|||
emphasis: { |
|||
show: true, |
|||
formatter: function (param) { |
|||
return param.data[3] |
|||
}, |
|||
position: 'top' |
|||
} |
|||
}, |
|||
itemStyle: { |
|||
normal: { |
|||
shadowBlur: 10, |
|||
shadowColor: 'rgba(120, 36, 50, 0.5)', |
|||
shadowOffsetY: 5, |
|||
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [ |
|||
{ offset: 0, color: 'rgb(251, 118, 123)' }, |
|||
{ offset: 1, color: 'rgb(204, 46, 72)' } |
|||
]) |
|||
} |
|||
} |
|||
}, |
|||
{ |
|||
name: '2015', |
|||
data: [ |
|||
[44056, 81.8, 23968973, 'Australia', 2015], |
|||
[43294, 81.7, 35939927, 'Canada', 2015], |
|||
[13334, 76.9, 1376048943, 'China', 2015], |
|||
[21291, 78.5, 11389562, 'Cuba', 2015], |
|||
[38923, 80.8, 5503457, 'Finland', 2015], |
|||
[37599, 81.9, 64395345, 'France', 2015], |
|||
[44053, 81.1, 80688545, 'Germany', 2015], |
|||
[42182, 82.8, 329425, 'Iceland', 2015], |
|||
[5903, 66.8, 1311050527, 'India', 2015], |
|||
[36162, 83.5, 126573481, 'Japan', 2015], |
|||
[1390, 71.4, 25155317, 'North Korea', 2015], |
|||
[34644, 80.7, 50293439, 'South Korea', 2015], |
|||
[34186, 80.6, 4528526, 'New Zealand', 2015], |
|||
[64304, 81.6, 5210967, 'Norway', 2015], |
|||
[24787, 77.3, 38611794, 'Poland', 2015], |
|||
[23038, 73.13, 143456918, 'Russia', 2015], |
|||
[19360, 76.5, 78665830, 'Turkey', 2015], |
|||
[38225, 81.4, 64715810, 'United Kingdom', 2015], |
|||
[53354, 79.1, 321773631, 'United States', 2015] |
|||
], |
|||
type: 'scatter', |
|||
symbolSize: function (data) { |
|||
return Math.sqrt(data[2]) / 5e2 |
|||
}, |
|||
label: { |
|||
emphasis: { |
|||
show: true, |
|||
formatter: function (param) { |
|||
return param.data[3] |
|||
}, |
|||
position: 'top' |
|||
} |
|||
}, |
|||
itemStyle: { |
|||
normal: { |
|||
shadowBlur: 10, |
|||
shadowColor: 'rgba(25, 100, 150, 0.5)', |
|||
shadowOffsetY: 5, |
|||
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [ |
|||
{ offset: 0, color: 'rgb(129, 227, 238)' }, |
|||
{ offset: 1, color: 'rgb(25, 183, 207)' } |
|||
]) |
|||
} |
|||
} |
|||
} |
|||
] |
|||
} |
|||
this.chartPie = echarts.init(document.getElementById('J_chartScatterBox')) |
|||
this.chartPie.setOption(option) |
|||
window.addEventListener('resize', () => { |
|||
this.chartPie.resize() |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.mod-demo-echarts { |
|||
> .el-alert { |
|||
margin-bottom: 10px; |
|||
} |
|||
> .el-row { |
|||
margin-top: -10px; |
|||
margin-bottom: -10px; |
|||
.el-col { |
|||
padding-top: 10px; |
|||
padding-bottom: 10px; |
|||
} |
|||
} |
|||
.chart-box { |
|||
min-height: 400px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,65 +0,0 @@ |
|||
<template> |
|||
<div class="mod-demo-ueditor"> |
|||
<el-alert |
|||
title="提示：" |
|||
type="warning" |
|||
:closable="false"> |
|||
<div slot-scope="description"> |
|||
<p class="el-alert__description">1. 此Demo只提供UEditor官方使用文档，入门部署和体验功能。具体使用请参考：http://fex.baidu.com/ueditor/</p> |
|||
<p class="el-alert__description">2. 浏览器控制台报错“请求后台配置项http错误，上传功能将不能正常使用！”，此错需要后台提供上传接口方法（赋值给serverUrl属性）</p> |
|||
</div> |
|||
</el-alert> |
|||
|
|||
<script :id="ueId" class="ueditor-box" type="text/plain" style="width: 100%; height: 260px;">hello world!</script> |
|||
|
|||
<!-- 获取内容 --> |
|||
<p><el-button @click="getContent()">获得内容</el-button></p> |
|||
<el-dialog |
|||
title="内容" |
|||
:visible.sync="dialogVisible" |
|||
:append-to-body="true"> |
|||
{{ ueContent }} |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button type="primary" @click="dialogVisible = false">确 定</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import ueditor from 'ueditor' |
|||
export default { |
|||
data () { |
|||
return { |
|||
ue: null, |
|||
ueId: `J_ueditorBox_${new Date().getTime()}`, |
|||
ueContent: '', |
|||
dialogVisible: false |
|||
} |
|||
}, |
|||
mounted () { |
|||
this.ue = ueditor.getEditor(this.ueId, { |
|||
// serverUrl: '', // 服务器统一请求接口路径 |
|||
zIndex: 3000 |
|||
}) |
|||
}, |
|||
methods: { |
|||
getContent () { |
|||
this.dialogVisible = true |
|||
this.ue.ready(() => { |
|||
this.ueContent = this.ue.getContent() |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.mod-demo-ueditor { |
|||
position: relative; |
|||
z-index: 510; |
|||
> .el-alert { |
|||
margin-bottom: 10px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,206 @@ |
|||
<template> |
|||
<div class="mod-config"> |
|||
<div style="text-align: center"> |
|||
<h1>本周发货预警</h1> |
|||
</div> |
|||
<div class="tableBoard"> |
|||
<!-- @mouseenter.native="mouseEnter"--> |
|||
<!-- @mouseleave.native="mouseLeave"--> |
|||
<el-table |
|||
cell-style="cc" |
|||
:height="height" |
|||
:data="tableData" |
|||
:row-class-name="tableRowClassName" |
|||
ref="wt_table" |
|||
border |
|||
style="width: 100%;"> |
|||
<el-table-column |
|||
prop="notifyDate" |
|||
header-align="center" |
|||
align="left" |
|||
min-width="45" |
|||
style="font-size: 20px" |
|||
label="发货日期"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="delNotifyNo" |
|||
header-align="center" |
|||
align="left" |
|||
min-width="45" |
|||
label="发货单号"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="customerID" |
|||
header-align="center" |
|||
align="left" |
|||
min-width="40" |
|||
label="客户编码"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="customerDesc" |
|||
header-align="center" |
|||
align="left" |
|||
min-width="120" |
|||
style="font-size: 20px" |
|||
label="客户名称"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="pickupStatus" |
|||
header-align="center" |
|||
align="left" |
|||
min-width="45" |
|||
label="配货状态"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="notifyQty" |
|||
header-align="center" |
|||
align="right" |
|||
min-width="40" |
|||
label="发货单数量"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="qtyRequired" |
|||
header-align="center" |
|||
align="right" |
|||
min-width="40" |
|||
label="已派工数量"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="qtyReported" |
|||
header-align="center" |
|||
align="right" |
|||
min-width="40" |
|||
label="入库数量"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="status" |
|||
header-align="center" |
|||
align="left" |
|||
min-width="60" |
|||
label="预警状态"> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
let rollstop = '' |
|||
let rolltimer = ''// 自动滚动的定时任务 |
|||
let refresher = '' //数据刷新定时器 |
|||
import { |
|||
getDelNotifyBoardData, |
|||
} from '@/api/board.js' |
|||
export default { |
|||
name: 'delNotifyBoard', |
|||
data () { |
|||
return { |
|||
pageIndex: 1, |
|||
totalPage: 1, |
|||
height: 200, |
|||
tableData: [], |
|||
// 默认的刷新，滚动时间，滚动间距 |
|||
// refreshTime: 5, |
|||
// rollTime: 5, |
|||
// rollPx: 1, |
|||
} |
|||
}, |
|||
mounted () { |
|||
this.$nextTick(() => { |
|||
this.height = window.innerHeight - 80 |
|||
}) |
|||
}, |
|||
methods: { |
|||
getFormatterNumber (row, column){ |
|||
// if(parseInt(row.weightperBag)==row.weightperBag){ |
|||
// return parseInt(row.weightperBag); |
|||
// }else{ |
|||
// return row.weightperBag.toFixed(3); |
|||
// } |
|||
}, |
|||
tableRowClassName ({row, rowIndex}) { |
|||
// if (row.finishedFlag == '2') { |
|||
// return 'success-row' |
|||
// } |
|||
// if (row.finishedFlag == '3') { |
|||
// return 'false-row' |
|||
// } |
|||
// return '' |
|||
}, |
|||
search () { |
|||
let inData= {number:this.pageIndex}; |
|||
getDelNotifyBoardData(inData).then(({data}) => { |
|||
this.tableData = data.rows; |
|||
this.totalPage= data.maxPage; |
|||
if(this.pageIndex+1>data.maxPage){ |
|||
this.pageIndex=1 |
|||
}else { |
|||
this.pageIndex=Number(this.pageIndex)+Number(1) |
|||
} |
|||
}) |
|||
}, |
|||
// 鼠标进入 |
|||
// mouseEnter (time) { |
|||
// // 鼠标进入停止滚动和切换的定时任务 |
|||
// this.autoRoll(true) |
|||
// }, |
|||
// 鼠标离开 |
|||
// mouseLeave () { |
|||
// // 开启 |
|||
// this.autoRoll() |
|||
// }, |
|||
// 设置自动滚动 |
|||
// autoRoll (stop) { |
|||
// if (stop) { |
|||
// clearInterval(rolltimer) |
|||
// return |
|||
// } |
|||
// |
|||
// // 拿到表格挂载后的真实DOM |
|||
// const table = this.$refs.wt_table |
|||
// // 拿到表格中承载数据的div元素 |
|||
// const divData = table.bodyWrapper |
|||
// // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果 |
|||
// rolltimer = setInterval(() => { |
|||
// // 元素自增距离顶部像素 |
|||
// divData.scrollTop = this.decimalUtil.add(Number(divData.scrollTop), Number(this.rollPx)) |
|||
// // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度) |
|||
// if (divData.clientHeight + divData.scrollTop +1>= divData.scrollHeight) { |
|||
// // 重置table距离顶部距离 |
|||
// |
|||
// divData.scrollTop = 0 |
|||
// |
|||
// } |
|||
// }, this.rollTime * 10) |
|||
// }, |
|||
refreshTable () { |
|||
refresher = setInterval(() => { |
|||
this.search() |
|||
}, 30000) |
|||
} |
|||
}, |
|||
created () { |
|||
this.search() |
|||
this.refreshTable() |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style > |
|||
.tableBoard .el-table .cell { |
|||
line-height: 13px; |
|||
font-size: 12px; |
|||
height: 13px; |
|||
padding: 0px; |
|||
} |
|||
|
|||
|
|||
.tableBoard .el-table .success-row { |
|||
background: #1bb61b; |
|||
} |
|||
.tableBoard .el-table .false-row { |
|||
background: #db1212; |
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,184 @@ |
|||
<template> |
|||
<div class="mod-config"> |
|||
<div style="text-align: center"> |
|||
<h1>日计划明细看板</h1> |
|||
</div> |
|||
<div class="tableBoard"> |
|||
<!-- @mouseenter.native="mouseEnter"--> |
|||
<!-- @mouseleave.native="mouseLeave"--> |
|||
<el-table |
|||
cell-style="cc" |
|||
:height="height" |
|||
:data="tableData" |
|||
:row-class-name="tableRowClassName" |
|||
ref="wt_table" |
|||
border |
|||
style="width: 100%;"> |
|||
<el-table-column |
|||
prop="resourceDesc" |
|||
header-align="center" |
|||
align="left" |
|||
min-width="45" |
|||
style="font-size: 20px" |
|||
label="机台名称"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="partNo" |
|||
header-align="center" |
|||
align="left" |
|||
min-width="45" |
|||
label="物料编码"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="partDesc" |
|||
header-align="center" |
|||
align="left" |
|||
min-width="120" |
|||
label="物料名称"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="qtyRequired" |
|||
header-align="center" |
|||
align="right" |
|||
min-width="40" |
|||
label="计划数量"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="qtyApprove" |
|||
header-align="center" |
|||
align="right" |
|||
min-width="40" |
|||
label="完成数量"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="qtyReported" |
|||
header-align="center" |
|||
align="right" |
|||
min-width="40" |
|||
label="入库数量"> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
let rollstop = '' |
|||
let rolltimer = ''// 自动滚动的定时任务 |
|||
let refresher = '' //数据刷新定时器 |
|||
import { |
|||
getScheduleListData, |
|||
} from '@/api/board.js' |
|||
export default { |
|||
name: 'scheduleListBoard', |
|||
data () { |
|||
return { |
|||
pageIndex: 1, |
|||
totalPage: 1, |
|||
height: 200, |
|||
tableData: [], |
|||
// 默认的刷新，滚动时间，滚动间距 |
|||
// refreshTime: 5, |
|||
// rollTime: 5, |
|||
// rollPx: 1, |
|||
} |
|||
}, |
|||
mounted () { |
|||
this.$nextTick(() => { |
|||
this.height = window.innerHeight - 80 |
|||
}) |
|||
}, |
|||
methods: { |
|||
getFormatterNumber (row, column){ |
|||
// if(parseInt(row.weightperBag)==row.weightperBag){ |
|||
// return parseInt(row.weightperBag); |
|||
// }else{ |
|||
// return row.weightperBag.toFixed(3); |
|||
// } |
|||
}, |
|||
tableRowClassName ({row, rowIndex}) { |
|||
// if (row.finishedFlag == '2') { |
|||
// return 'success-row' |
|||
// } |
|||
// if (row.finishedFlag == '3') { |
|||
// return 'false-row' |
|||
// } |
|||
// return '' |
|||
}, |
|||
search () { |
|||
let inData= {number:this.pageIndex}; |
|||
getScheduleListData(inData).then(({data}) => { |
|||
this.tableData = data.rows; |
|||
this.totalPage= data.maxPage; |
|||
if(this.pageIndex+1>data.maxPage){ |
|||
this.pageIndex=1 |
|||
}else { |
|||
this.pageIndex=Number(this.pageIndex)+Number(1) |
|||
} |
|||
}) |
|||
}, |
|||
// 鼠标进入 |
|||
// mouseEnter (time) { |
|||
// // 鼠标进入停止滚动和切换的定时任务 |
|||
// this.autoRoll(true) |
|||
// }, |
|||
// 鼠标离开 |
|||
// mouseLeave () { |
|||
// // 开启 |
|||
// this.autoRoll() |
|||
// }, |
|||
// 设置自动滚动 |
|||
// autoRoll (stop) { |
|||
// if (stop) { |
|||
// clearInterval(rolltimer) |
|||
// return |
|||
// } |
|||
// |
|||
// // 拿到表格挂载后的真实DOM |
|||
// const table = this.$refs.wt_table |
|||
// // 拿到表格中承载数据的div元素 |
|||
// const divData = table.bodyWrapper |
|||
// // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果 |
|||
// rolltimer = setInterval(() => { |
|||
// // 元素自增距离顶部像素 |
|||
// divData.scrollTop = this.decimalUtil.add(Number(divData.scrollTop), Number(this.rollPx)) |
|||
// // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度) |
|||
// if (divData.clientHeight + divData.scrollTop +1>= divData.scrollHeight) { |
|||
// // 重置table距离顶部距离 |
|||
// |
|||
// divData.scrollTop = 0 |
|||
// |
|||
// } |
|||
// }, this.rollTime * 10) |
|||
// }, |
|||
refreshTable () { |
|||
refresher = setInterval(() => { |
|||
this.search() |
|||
}, 30000) |
|||
} |
|||
}, |
|||
created () { |
|||
this.search() |
|||
this.refreshTable() |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style > |
|||
.tableBoard .el-table .cell { |
|||
line-height: 13px; |
|||
font-size: 12px; |
|||
height: 13px; |
|||
padding: 0px; |
|||
} |
|||
|
|||
|
|||
.tableBoard .el-table .success-row { |
|||
background: #1bb61b; |
|||
} |
|||
.tableBoard .el-table .false-row { |
|||
background: #db1212; |
|||
} |
|||
|
|||
</style> |
|||
1
static/plugins/echarts-3.8.5/echarts.common.min.js
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
18
static/plugins/echarts-5.3.1/echarts.min.js
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
Write
Preview
Loading…
Cancel
Save
Reference in new issue