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