5 changed files with 397 additions and 57 deletions
-
56public/echarts2/echarts.min.js
-
5src/router/index.js
-
3src/views/Home.vue
-
366src/views/newScheduledBoard.vue
-
2vue.config.js
56
public/echarts2/echarts.min.js
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,366 @@ |
|||||
|
<template> |
||||
|
<div class="container"> |
||||
|
<div style="width:100%;height: 20%;text-align:center;"> |
||||
|
<TimeC></TimeC> |
||||
|
<!-- <div style="font-size: 26px;float: right;color: #ffffff;height: 100%" v-html="clock"></div>--> |
||||
|
<div style="float: left;width: 25%;height: 100%;text-align:center;margin-left: 37% "> |
||||
|
<div style="height: 40%;width: 100%;text-align: center;margin-top: 3%;"> |
||||
|
<label style="font-size: 30px;color: #ffffff">派工单完成状况</label> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div style="width:100%;height: 79%;"> |
||||
|
<div style="float: left;height: 100%;width: 35%; "> |
||||
|
<div style="height: 12%;width: 100%;margin-top: 1%"> |
||||
|
<div |
||||
|
style="width: 12%;height: 40%;float: left;margin-left: 18%;border-radius: 10px; background-color: #ec6566;"></div> |
||||
|
<div style="width: 25%;height: 50%;float: left;margin-left: 3%;"> |
||||
|
<label style="font-size: 16px;color:#ffffff; ">未完工</label> |
||||
|
</div> |
||||
|
<div |
||||
|
style="width: 12%;height: 40%;float: left;margin-left: 1%;border-radius: 10px; background-color: #90ca75;"></div> |
||||
|
<div style="width: 25%;height: 50%;float: left;margin-left: 3%;"> |
||||
|
<label style="font-size: 16px;color:#ffffff; ">已完工</label> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div style="height: 88%;width: 100%;"> |
||||
|
<div id="pie" style="float:left;margin-left: 0px; margin-top: 0%; width: 100%; height:80%;"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div style="float: left;height: 45%;width: 58%;margin-left:3% "> |
||||
|
<table class="table table-bordered" style="width:100%;font-size:16px;color: #ffffff" id="table"> |
||||
|
</table> |
||||
|
</div> |
||||
|
<div style="float: left;height: 49%;width: 65%; "> |
||||
|
<div id="main" style="width: 100%;height: 100%;margin-top: 0px"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import TimeC from "./time" |
||||
|
export default { |
||||
|
name: "newScheduledBoard", |
||||
|
data() { |
||||
|
return { |
||||
|
myChart: null, |
||||
|
} |
||||
|
}, |
||||
|
components: { |
||||
|
TimeC |
||||
|
}, |
||||
|
methods: { |
||||
|
draw(){ |
||||
|
// if (data_temp[i].percentage >= 100) { |
||||
|
if (true) { |
||||
|
var color = '#90ca75'; |
||||
|
} else { |
||||
|
var color = '#fff300'; |
||||
|
} |
||||
|
let option = ({ |
||||
|
title: [{ |
||||
|
text: '工序：' + "打磨", |
||||
|
// text: '工序：' + data_temp[i + x].itemNo, |
||||
|
// x 设置水平安放位置，默认左对齐，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px） |
||||
|
x: 'center', |
||||
|
// y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px） |
||||
|
y: 'bottom', |
||||
|
// itemGap设置主副标题纵向间隔，单位px，默认为10， |
||||
|
backgroundColor: '#EEE', |
||||
|
// 主标题文本样式设置 |
||||
|
textStyle: { |
||||
|
fontSize: 20, |
||||
|
fontWeight: 'bolder', |
||||
|
color: '#fff300' |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
text: '20%', |
||||
|
// text: data_temp[i + x].percentage + '%', |
||||
|
// x 设置水平安放位置，默认左对齐，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px） |
||||
|
x: 'center', |
||||
|
// y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px） |
||||
|
y: 'center', |
||||
|
// itemGap设置主副标题纵向间隔，单位px，默认为10， |
||||
|
backgroundColor: 'rgba(0,0,0,0)', |
||||
|
// 主标题文本样式设置 |
||||
|
textStyle: { |
||||
|
fontSize: 20, |
||||
|
fontWeight: 'bolder', |
||||
|
color: color |
||||
|
}, |
||||
|
}], |
||||
|
series: [ |
||||
|
{ |
||||
|
name: '完成数量统计', |
||||
|
type: 'pie', // 设置图表类型为饼图 |
||||
|
radius: ['45%', '75%'], // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。 |
||||
|
data: [ // 数据数组，name 为数据项名称，value 为数据项值 |
||||
|
// {value: data_temp[i + x].approveQty, name: ''}, |
||||
|
// {value: data_temp[i + x].unapproveQty, name: ''} |
||||
|
{value: 20, name: ''}, |
||||
|
{value: 80, name: ''} |
||||
|
], |
||||
|
color: ['#90ca75', '#ec6566'], |
||||
|
labelLine: { |
||||
|
normal: { |
||||
|
show: false |
||||
|
} |
||||
|
}, |
||||
|
label: { |
||||
|
normal: { |
||||
|
position: 'outer', // 设置标签位置，默认在饼状图外 可选值：'outer' ¦ 'inner（饼状图上）' |
||||
|
// formatter: '{a} {b} : {c}个 ({d}%)' 设置标签显示内容 ，默认显示{b} |
||||
|
// {a}指series.name {b}指series.data的name |
||||
|
// {c}指series.data的value {d}%指这一部分占总数的百分比 |
||||
|
formatter: '{b}' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
] |
||||
|
}); |
||||
|
this.myChart = echarts.init(document.getElementById('pie')); |
||||
|
this.myChart.setOption(option); |
||||
|
}, |
||||
|
tableInit() { |
||||
|
$('#table').bootstrapTable({ |
||||
|
striped: true, //是否显示行间隔色 |
||||
|
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*） |
||||
|
pagination: false, //是否显示分页（*） |
||||
|
sortable: false, //是否启用排序 |
||||
|
sortOrder: "asc", //排序方式 |
||||
|
queryParamsType: "undefined", //排序方式 |
||||
|
queryParams: function queryParams(params) { //设置查询参数 |
||||
|
|
||||
|
}, |
||||
|
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*） |
||||
|
pageNumber: 1, //初始化加载第一页，默认第一页 |
||||
|
pageSize: 10, //每页的记录行数（*） |
||||
|
pageList: [10, 25, 50, 100], //可供选择的每页的行数（*） |
||||
|
search: false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大 |
||||
|
searchTimeOut: 1000, |
||||
|
// : true, |
||||
|
showColumns: false, //是否显示所有的列 |
||||
|
showRefresh: false, //是否显示刷新按钮 |
||||
|
minimumCountColumns: 2, //最少允许的列数 |
||||
|
clickToSelect: true, //是否启用点击选中行 |
||||
|
singleSelect: true, |
||||
|
// height: 300, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度 |
||||
|
uniqueId: "id", //每一行的唯一标识，一般为主键列 |
||||
|
// showToggle: true, //是否显示详细视图和列表视图的切换按钮 |
||||
|
cardView: false, //是否显示详细视图 |
||||
|
detailView: false, //是否显示父子表 |
||||
|
|
||||
|
|
||||
|
columns: [{ |
||||
|
field: 't1', |
||||
|
title: '派工单号', |
||||
|
halign:'left', |
||||
|
width: 100, |
||||
|
cellStyle: function () { |
||||
|
return {css: {"height": "30px", "color": "yellow"}} |
||||
|
} |
||||
|
|
||||
|
}, { |
||||
|
field: 't1', |
||||
|
title: '操作员工号', |
||||
|
halign:'left', |
||||
|
width: 100, |
||||
|
cellStyle: function () { |
||||
|
return {css: {"height": "30px", "color": "yellow"}} |
||||
|
} |
||||
|
}, { |
||||
|
field: 't1', |
||||
|
title: '设备编码', |
||||
|
halign:'left', |
||||
|
width: 100, |
||||
|
cellStyle: function () { |
||||
|
return {css: {"height": "30px", "color": "yellow"}} |
||||
|
} |
||||
|
}, { |
||||
|
field: 't1', |
||||
|
title: '班次', |
||||
|
halign:'left', |
||||
|
width: 100, |
||||
|
cellStyle: function () { |
||||
|
return {css: {"height": "30px", "color": "yellow"}} |
||||
|
} |
||||
|
}, { |
||||
|
field: 't1', |
||||
|
title: '派工数量', |
||||
|
halign:'left', |
||||
|
width: 100, |
||||
|
cellStyle: function () { |
||||
|
return {css: {"height": "30px", "color": "yellow"}} |
||||
|
} |
||||
|
}, { |
||||
|
field: 't1', |
||||
|
title: '已完工数量', |
||||
|
halign:'left', |
||||
|
width: 100, |
||||
|
cellStyle: function () { |
||||
|
return {css: {"height": "30px", "color": "yellow"}} |
||||
|
} |
||||
|
}, { |
||||
|
field: 't1', |
||||
|
title: '未完工数量', |
||||
|
halign:'left', |
||||
|
width: 100, |
||||
|
cellStyle: function () { |
||||
|
return {css: {"height": "30px", "color": "yellow"}} |
||||
|
} |
||||
|
} |
||||
|
], |
||||
|
onLoadSuccess: function (data) { |
||||
|
|
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
|
||||
|
}, |
||||
|
data(){ |
||||
|
let arr=[] |
||||
|
let indata={ |
||||
|
t1:'测试' |
||||
|
} |
||||
|
arr.push(indata); |
||||
|
arr.push(indata); |
||||
|
arr.push(indata); |
||||
|
let data2 = {"total": arr.length, "rows": arr}; |
||||
|
$('#table').bootstrapTable('load', data2); |
||||
|
}, |
||||
|
|
||||
|
draw2(){ |
||||
|
let chartDom = document.getElementById('main'); |
||||
|
let myChart = echarts.init(chartDom); |
||||
|
let option; |
||||
|
// document.getElementById('main').style.height="300px"; |
||||
|
if(this.option!=null){ |
||||
|
document.getElementById('main').removeAttribute('_echarts_instance_') |
||||
|
this.option = null |
||||
|
} |
||||
|
option = { |
||||
|
color:["#11e2b6", "#ff0000"], |
||||
|
legend: { |
||||
|
textStyle: { //图例文字的样式 |
||||
|
color: '#fff', |
||||
|
// fontSize: 12 |
||||
|
}, |
||||
|
}, |
||||
|
tooltip: {}, |
||||
|
xAxis:[ |
||||
|
{ |
||||
|
type: 'category', |
||||
|
// data: xAxisData |
||||
|
data: [ |
||||
|
{ |
||||
|
value: '周一', |
||||
|
textStyle: { |
||||
|
color: '#EEE' |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
value: '周二', |
||||
|
textStyle: { |
||||
|
color: '#EEE' |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
value: '周三', |
||||
|
textStyle: { |
||||
|
color: '#EEE' |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
value: '周四', |
||||
|
textStyle: { |
||||
|
color: '#EEE' |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
value: '周五', |
||||
|
textStyle: { |
||||
|
color: '#EEE' |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
value: '周六', |
||||
|
textStyle: { |
||||
|
color: '#EEE' |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
value: '周日', |
||||
|
textStyle: { |
||||
|
color: '#EEE' |
||||
|
} |
||||
|
}, |
||||
|
], |
||||
|
axisLine:{ |
||||
|
lineStyle: { |
||||
|
color:'#eee' |
||||
|
} |
||||
|
}, |
||||
|
axisTick: { |
||||
|
lineStyle: { |
||||
|
color:'#eee' |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
}, |
||||
|
], |
||||
|
yAxis: |
||||
|
{ |
||||
|
type: 'value', |
||||
|
axisLine:{ |
||||
|
lineStyle: { |
||||
|
color:'#eee' |
||||
|
} |
||||
|
}, |
||||
|
axisTick: { |
||||
|
lineStyle: { |
||||
|
color:'#eee' |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
series: [ |
||||
|
{ |
||||
|
name: '白班', |
||||
|
type: 'bar', |
||||
|
emphasis: { |
||||
|
focus: 'series' |
||||
|
}, |
||||
|
// data: seriesData1 |
||||
|
data: [320, 332, 301, 334, 390, 330, 320] |
||||
|
}, |
||||
|
{ |
||||
|
name: '晚班', |
||||
|
type: 'bar', |
||||
|
emphasis: { |
||||
|
focus: 'series' |
||||
|
}, |
||||
|
// data: seriesData2 |
||||
|
data: [120, 132, 101, 134, 90, 230, 210] |
||||
|
} |
||||
|
] |
||||
|
}; |
||||
|
|
||||
|
option && myChart.setOption(option); |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.draw(); |
||||
|
this.tableInit(); |
||||
|
this.data(); |
||||
|
this.draw2(); |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<<style scoped> |
||||
|
.container { |
||||
|
height: 109%; |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue