You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
478 lines
16 KiB
478 lines
16 KiB
<template>
|
|
<div class="container">
|
|
<div style="width:100%;height: 25%;text-align:center;">
|
|
<TimeC></TimeC>
|
|
<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 style="height: 34%;width: 100%;margin-top: 10%">
|
|
<div
|
|
style="width: 12%;height: 40%;float: left;margin-left: 5%;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: 8%;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>
|
|
</div>
|
|
<div style="width:100%;height: 40%;">
|
|
<div id="pie0" style="float:left;margin-left: 0px; margin-top: 0px; width: 33%; height:100%;"></div>
|
|
<div id="pie1" style="float:left;margin-left: 0px; margin-top: 0px; width: 33%; height:100%;"></div>
|
|
<div id="pie2" style="float:left;margin-left: 0px; margin-top: 0px; width: 33%; height:100%;"></div>
|
|
</div>
|
|
<div style="width:100%;height: 40%">
|
|
<div id="pie3" style="float:left;margin-left: 0px; margin-top: 0px; width: 33%; height:100%;"></div>
|
|
<div id="pie4" style="float:left;margin-left: 0px; margin-top: 0px; width: 33%; height:100%;"></div>
|
|
<div id="pie5" style="float:left;margin-left: 0px; margin-top: 0px; width: 33%; height:100%;"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import TimeC from "./time"
|
|
export default {
|
|
name: "scheduledBoard",
|
|
data() {
|
|
return {
|
|
currentDate: null,
|
|
stringdate: null,
|
|
itemNum: null,
|
|
myChart0: null,
|
|
myChart1: null,
|
|
myChart2: null,
|
|
myChart3: null,
|
|
myChart4: null,
|
|
myChart5: null,
|
|
countTimer: null,
|
|
refreshTime: 30,
|
|
loader: null,
|
|
timer: null,
|
|
handler: null,
|
|
nextPage: null,
|
|
}
|
|
},
|
|
components: {
|
|
TimeC
|
|
},
|
|
methods: {
|
|
load() {
|
|
let that = this;
|
|
$.ajax({
|
|
url: "/board/getJumpConfig",
|
|
type: "post",
|
|
data: {"boardName": 'scheduledBoard'},
|
|
dataType: "json",
|
|
success: (data) => {
|
|
if (data.rows2 != "" && data.rows2 != null) {
|
|
that.nextPage = data.rows2;
|
|
if (data.rows != "" && data.rows != null) {
|
|
let jumpTime = Number(data.rows);
|
|
if (jumpTime > 0) {
|
|
that.countTimer = window.setTimeout(() => {
|
|
that.jump()
|
|
}, 1000 * jumpTime);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}).fail(() => {
|
|
this.$router.push("/")
|
|
})
|
|
},
|
|
|
|
jump() {
|
|
clearTimeout(this.countTimer);
|
|
clearInterval(this.loader);
|
|
clearInterval(this.timer);
|
|
clearInterval(this.handler);
|
|
$.ajax({
|
|
url: "/board/kanKanYouMeiYouDiaoXian",
|
|
type: "post",
|
|
data: {},
|
|
dataType: "json",
|
|
success: (data) => {
|
|
this.$router.push(this.nextPage);
|
|
}
|
|
}).fail(() => {
|
|
this.$router.push("/")
|
|
})
|
|
|
|
},
|
|
|
|
getItemNoNumber() {
|
|
let that = this;
|
|
$.ajax({
|
|
url: "/board/getBoardData",
|
|
type: "POST",
|
|
contentType: 'application/json;charset=utf-8',
|
|
async: false,
|
|
data: null,// 你的formid
|
|
dataType: "JSON",
|
|
success: (data) => {
|
|
if (data.success) {
|
|
that.itemNum = data.rows.length;
|
|
/* console.log(itemNum)*/
|
|
} else {
|
|
alert(data.msg);
|
|
}
|
|
}
|
|
});
|
|
},
|
|
|
|
load2() {
|
|
let that = this;
|
|
let timeout;
|
|
if (that.itemNum == 0) {
|
|
timeout = 1;
|
|
} else {
|
|
timeout = Math.ceil(that.itemNum / 6);
|
|
}
|
|
$.ajax({
|
|
url: "/board/getRefreshTime",
|
|
type: "post",
|
|
data: {"boardName": 'scheduledBoard'},
|
|
dataType: "json",
|
|
success: (data) => {
|
|
if (data.rows != "" && data.rows != null) {
|
|
that.refreshTime = Number(data.rows);
|
|
if(that.refreshTime ==0){
|
|
that.refreshTime =5;
|
|
}
|
|
}
|
|
that.loader = window.setInterval(() => {
|
|
this.getBoardData()
|
|
}, timeout * 1000 * this.refreshTime);
|
|
that.getBoardData();
|
|
|
|
},
|
|
})
|
|
},
|
|
|
|
getBoardData() {
|
|
$.ajax({
|
|
url: "/board/getBoardData",
|
|
type: "POST",
|
|
contentType: 'application/json;charset=utf-8',
|
|
async: false,
|
|
data: null,// 你的formid
|
|
dataType: "JSON",
|
|
success: (data) => {
|
|
if (data.success) {
|
|
let data_temp = data.rows;
|
|
this.boardLoading(data_temp);
|
|
} else {
|
|
this.jump();
|
|
}
|
|
},
|
|
error: () => {
|
|
this.jump();
|
|
}
|
|
});
|
|
},
|
|
|
|
boardLoading(data_temp) {
|
|
let that = this
|
|
that.doOne(data_temp);
|
|
var x = 0;
|
|
that.handler = setInterval(function () {
|
|
|
|
that.myChart0.dispose();
|
|
that.myChart0 = null;
|
|
that.myChart1.dispose();
|
|
that.myChart1 = null;
|
|
that.myChart2.dispose();
|
|
that.myChart2 = null;
|
|
that.myChart3.dispose();
|
|
that.myChart3 = null;
|
|
that.myChart4.dispose();
|
|
that.myChart4 = null;
|
|
that.myChart5.dispose();
|
|
that.myChart5 = null;
|
|
|
|
for (let i = 6; i < 12 && i + x < data_temp.length; i++) {
|
|
if (data_temp[i + x].percentage >= 100) {
|
|
var color = '#90ca75';
|
|
} else {
|
|
var color = '#fff300';
|
|
}
|
|
// if (i == 6) {
|
|
//
|
|
// that.myChart0.dispose();
|
|
// } else if (i == 7) {
|
|
// that.myChart1.dispose();
|
|
// } else if (i == 8) {
|
|
// that.myChart2.dispose();
|
|
// } else if (i == 9) {
|
|
// that.myChart3.dispose();
|
|
// } else if (i == 10) {
|
|
// that.myChart4.dispose();
|
|
// } else if (i == 11) {
|
|
// that.myChart5.dispose();
|
|
// }
|
|
let option = ({
|
|
title: [{
|
|
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: 16,
|
|
fontWeight: 'bolder',
|
|
color: '#fff300'
|
|
}
|
|
},
|
|
{
|
|
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: 18,
|
|
fontWeight: 'bolder',
|
|
color: color
|
|
},
|
|
}],
|
|
series: [
|
|
{
|
|
name: '完成数量统计',
|
|
type: 'pie', // 设置图表类型为饼图
|
|
radius: ['40%', '70%'], // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
|
|
data: [ // 数据数组，name 为数据项名称，value 为数据项值
|
|
{value: data_temp[i + x].approveQty, name: ''},
|
|
{value: data_temp[i + x].unapproveQty, 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}'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
});
|
|
if (i == 6) {
|
|
that.myChart0 = echarts.init(document.getElementById('pie0'));
|
|
that.myChart0.setOption(option);
|
|
} else if (i == 7) {
|
|
that.myChart1 = echarts.init(document.getElementById('pie1'));
|
|
that.myChart1.setOption(option);
|
|
} else if (i == 8) {
|
|
that.myChart2 = echarts.init(document.getElementById('pie2'));
|
|
that.myChart2.setOption(option);
|
|
} else if (i == 9) {
|
|
that.myChart3 = echarts.init(document.getElementById('pie3'));
|
|
that.myChart3.setOption(option);
|
|
} else if (i == 10) {
|
|
that.myChart4 = echarts.init(document.getElementById('pie4'));
|
|
that.myChart4.setOption(option);
|
|
} else if (i == 11) {
|
|
that.myChart5 = echarts.init(document.getElementById('pie5'));
|
|
that.myChart5.setOption(option);
|
|
}
|
|
}
|
|
x = Number(x) + 6;
|
|
if (x + 6 >= data_temp.length) {
|
|
/*console.log(x);*/
|
|
clearInterval(that.handler);
|
|
}
|
|
}, 1000 * that.refreshTime)
|
|
|
|
},
|
|
doOne(data_temp) {
|
|
for (let i = 0; i < 6 && i < data_temp.length; i++) {
|
|
if (data_temp[i].percentage >= 100) {
|
|
var color = '#90ca75';
|
|
} else {
|
|
var color = '#fff300';
|
|
}
|
|
if (i == 0) {
|
|
if (this.myChart0) {
|
|
this.myChart0.dispose();
|
|
}
|
|
// $("#pie0").removeAttr("_echarts_instance_").empty();
|
|
} else if (i == 1) {
|
|
if (this.myChart1) {
|
|
this.myChart1.dispose();
|
|
}
|
|
// $("#pie1").removeAttr("_echarts_instance_").empty();
|
|
} else if (i == 2) {
|
|
if (this.myChart2) {
|
|
this.myChart2.dispose();
|
|
}
|
|
// $("#pie2").removeAttr("_echarts_instance_").empty();
|
|
} else if (i == 3) {
|
|
if (this.myChart3) {
|
|
this.myChart3.dispose();
|
|
}
|
|
// $("#pie3").removeAttr("_echarts_instance_").empty();
|
|
} else if (i == 4) {
|
|
if (this.myChart4) {
|
|
this.myChart4.dispose();
|
|
}
|
|
// $("#pie4").removeAttr("_echarts_instance_").empty();
|
|
} else if (i == 5) {
|
|
if (this.myChart5) {
|
|
this.myChart5.dispose();
|
|
}
|
|
// $("#pie5").removeAttr("_echarts_instance_").empty();
|
|
}
|
|
let option = ({
|
|
title: [{
|
|
text: '工序：' + data_temp[i].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: 16,
|
|
fontWeight: 'bolder',
|
|
color: '#fff300'
|
|
}
|
|
},
|
|
{
|
|
text: data_temp[i].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: 18,
|
|
fontWeight: 'bolder',
|
|
color: color
|
|
},
|
|
}],
|
|
series: [
|
|
{
|
|
name: '完成数量统计',
|
|
type: 'pie', // 设置图表类型为饼图
|
|
radius: ['40%', '70%'], // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
|
|
data: [ // 数据数组，name 为数据项名称，value 为数据项值
|
|
{value: data_temp[i].approveQty, name: ''},
|
|
{value: data_temp[i].unapproveQty, 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}'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
});
|
|
// var myChart = echarts.init(document.getElementById('pie' + i));
|
|
//
|
|
// myChart.setOption(option);
|
|
if (i == 0) {
|
|
this.myChart0 = echarts.init(document.getElementById('pie0'));
|
|
this.myChart0.setOption(option);
|
|
} else if (i == 1) {
|
|
this.myChart1 = echarts.init(document.getElementById('pie1'));
|
|
this.myChart1.setOption(option);
|
|
} else if (i == 2) {
|
|
this.myChart2 = echarts.init(document.getElementById('pie2'));
|
|
this.myChart2.setOption(option);
|
|
} else if (i == 3) {
|
|
this.myChart3 = echarts.init(document.getElementById('pie3'));
|
|
this.myChart3.setOption(option);
|
|
} else if (i == 4) {
|
|
this.myChart4 = echarts.init(document.getElementById('pie4'));
|
|
this.myChart4.setOption(option);
|
|
} else if (i == 5) {
|
|
this.myChart5 = echarts.init(document.getElementById('pie5'));
|
|
this.myChart5.setOption(option);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
|
|
this.load();
|
|
this.getItemNoNumber();
|
|
this.load2();
|
|
|
|
},
|
|
beforeDestroy() {
|
|
clearInterval(this.handler);
|
|
clearTimeout(this.countTimer);
|
|
clearInterval(this.loader);
|
|
|
|
},
|
|
destroyed() {
|
|
|
|
this.myChart0.clear()
|
|
this.myChart0.dispose()
|
|
this.myChart0 = null
|
|
window.removeEventListener('resize', () => { this.myChart0.resize() })
|
|
|
|
this.myChart1.clear()
|
|
this.myChart1.dispose()
|
|
this.myChart1 = null
|
|
window.removeEventListener('resize', () => { this.myChart1.resize() })
|
|
|
|
this.myChart2.clear()
|
|
this.myChart2.dispose()
|
|
this.myChart2 = null
|
|
window.removeEventListener('resize', () => { this.myChart2.resize() })
|
|
|
|
this.myChart3.clear()
|
|
this.myChart3.dispose()
|
|
this.myChart3 = null
|
|
window.removeEventListener('resize', () => { this.myChart3.resize() })
|
|
|
|
this.myChart4.clear()
|
|
this.myChart4.dispose()
|
|
this.myChart4 = null
|
|
window.removeEventListener('resize', () => { this.myChart4.resize() })
|
|
|
|
this.myChart5.clear()
|
|
this.myChart5.dispose()
|
|
this.myChart5 = null
|
|
window.removeEventListener('resize', () => { this.myChart5.resize() })
|
|
|
|
},
|
|
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.container {
|
|
height: 100%;
|
|
}
|
|
</style>
|