281 lines
6.9 KiB
Vue
281 lines
6.9 KiB
Vue
|
<template>
|
||
|
|
<div id="center">
|
||
|
|
<dv-border-box-13>
|
||
|
|
<div class="dvrow">
|
||
|
|
<div>
|
||
|
|
<span class="title-span">当前生产进度跟踪表</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div id="progressChart" class="progressChart"></div>
|
||
|
|
</dv-border-box-13>
|
||
|
|
<dv-border-box-13>
|
||
|
|
<div class="dvrow">
|
||
|
|
<div>
|
||
|
|
<span class="title-span">当前设计进度跟踪表</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<leftbottom />
|
||
|
|
</dv-border-box-13>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { request } from "@/utils/request.js";
|
||
|
|
import leftbottom from "./leftbottom.vue";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
leftbottom,
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
dataA: 0,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.initChart();
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
initChart() {
|
||
|
|
// const labelval1= {}
|
||
|
|
const labelOption = {
|
||
|
|
show: true,
|
||
|
|
formatter: "{c}{name|%}",
|
||
|
|
fontSize: 14,
|
||
|
|
rich: {
|
||
|
|
name: {},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
const labelOption2 = {
|
||
|
|
show: true,
|
||
|
|
formatter: (obj) => {
|
||
|
|
let data1 = [10, 30, 10, 5, 5, 10];
|
||
|
|
let data2 = [10, 10, 30, 10, 10, 10];
|
||
|
|
let data3 = [10, 10, 40, 10, 10, 10];
|
||
|
|
let data4 = [20, 10, 15, 10, 10, 20];
|
||
|
|
let arrC = 0;
|
||
|
|
let dataA = data1[obj.dataIndex];
|
||
|
|
let dataB = data2[obj.dataIndex];
|
||
|
|
let dataC = data3[obj.dataIndex];
|
||
|
|
let dataD = data4[obj.dataIndex];
|
||
|
|
let dataAll = 0;
|
||
|
|
switch (obj.componentIndex) {
|
||
|
|
case 0:
|
||
|
|
if (dataA) {
|
||
|
|
dataAll = dataAll + dataA;
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
case 1:
|
||
|
|
if (dataA) {
|
||
|
|
dataAll = dataAll + dataA;
|
||
|
|
}
|
||
|
|
if (dataB) {
|
||
|
|
dataAll = dataAll + dataB;
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
case 2:
|
||
|
|
if (dataA) {
|
||
|
|
dataAll = dataAll + dataA;
|
||
|
|
}
|
||
|
|
if (dataB) {
|
||
|
|
dataAll = dataAll + dataB;
|
||
|
|
}
|
||
|
|
if (dataC) {
|
||
|
|
dataAll = dataAll + dataC;
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
case 3:
|
||
|
|
if (dataA) {
|
||
|
|
dataAll = dataAll + dataA;
|
||
|
|
}
|
||
|
|
if (dataB) {
|
||
|
|
dataAll = dataAll + dataB;
|
||
|
|
}
|
||
|
|
if (dataC) {
|
||
|
|
dataAll = dataAll + dataC;
|
||
|
|
}
|
||
|
|
if (dataD) {
|
||
|
|
dataAll = dataAll + dataD;
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
// for (var i = 0; i < obj.dataIndex; i++) {
|
||
|
|
// switch (obj.componentIndex) {
|
||
|
|
// case 1:
|
||
|
|
// if (data2[i]) {
|
||
|
|
// arrC = arrC + data2[i];
|
||
|
|
// }
|
||
|
|
// break;
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
// console.log(arr);
|
||
|
|
// this.dataA = this.dataA + obj.value;
|
||
|
|
//console.log(obj);
|
||
|
|
return dataAll + "%";
|
||
|
|
},
|
||
|
|
textStyle: {
|
||
|
|
// 数值样式
|
||
|
|
color: "#fff",
|
||
|
|
fontSize: 12,
|
||
|
|
},
|
||
|
|
fontSize: 14,
|
||
|
|
rich: {
|
||
|
|
name: {},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
let progressChart = this.$echarts.init(
|
||
|
|
document.getElementById("progressChart")
|
||
|
|
);
|
||
|
|
let dataX = [
|
||
|
|
"DDZZ-自动化夹具",
|
||
|
|
"BX-VM项目",
|
||
|
|
"CQHQ-BAIC缸盖低压模具",
|
||
|
|
"CA-HE15-AA缸盖",
|
||
|
|
"CA-HE15-TG-AA缸盖",
|
||
|
|
"SDWC-226B缸盖",
|
||
|
|
];
|
||
|
|
// dataX对应的数据
|
||
|
|
let data1 = [10, 30, 10, 5, 5, 10];
|
||
|
|
let data2 = [10, 10, 30, 10, 10, 10];
|
||
|
|
let data3 = [10, 10, 40, 10, 10, 10];
|
||
|
|
let data4 = [20, 10, 15, 10, 10, 20];
|
||
|
|
const option = {
|
||
|
|
dataZoom: [
|
||
|
|
{
|
||
|
|
// 第一个 dataZoom 组件
|
||
|
|
type: "inside",
|
||
|
|
yAxisIndex: 0, // 表示这个 dataZoom 组件控制 第一个
|
||
|
|
startValue: 0, // 数据窗口范围的起始数值index
|
||
|
|
endValue: 2, // 数据窗口范围的结束数值index
|
||
|
|
},
|
||
|
|
],
|
||
|
|
tooltip: {
|
||
|
|
trigger: "axis",
|
||
|
|
axisPointer: {
|
||
|
|
type: "shadow",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
textStyle: {
|
||
|
|
color: "white",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
top: "15%",
|
||
|
|
left: "33%",
|
||
|
|
right: "5%",
|
||
|
|
bottom: "13%",
|
||
|
|
// containLabel: true,
|
||
|
|
},
|
||
|
|
xAxis: {
|
||
|
|
min: "0",
|
||
|
|
max: "100",
|
||
|
|
interval: 20,
|
||
|
|
type: "value",
|
||
|
|
axisLabel: {
|
||
|
|
formatter: "{value}%",
|
||
|
|
textStyle: {
|
||
|
|
color: "#fff",
|
||
|
|
fontSize: 16,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
splitLine: {
|
||
|
|
show: true,
|
||
|
|
lineStyle: {
|
||
|
|
type: "dashed", //solid实线;dashed虚线
|
||
|
|
color: "rgb(81, 82, 8,0.4)",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
type: "category",
|
||
|
|
data: dataX,
|
||
|
|
axisLabel: {
|
||
|
|
textStyle: {
|
||
|
|
color: "#fff",
|
||
|
|
fontSize: 16,
|
||
|
|
},
|
||
|
|
rotate: 0, // 文字倾斜显示
|
||
|
|
},
|
||
|
|
// 背景刻度线
|
||
|
|
splitLine: {
|
||
|
|
show: true,
|
||
|
|
lineStyle: {
|
||
|
|
type: "dashed", //solid实线;dashed虚线
|
||
|
|
color: "rgb(81, 82, 8,0.4)",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: "3月第1周",
|
||
|
|
type: "bar",
|
||
|
|
stack: "total",
|
||
|
|
label: labelOption2,
|
||
|
|
|
||
|
|
data: data1,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "3月第2周",
|
||
|
|
type: "bar",
|
||
|
|
stack: "total",
|
||
|
|
label: labelOption2,
|
||
|
|
data: data2,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "3月第3周",
|
||
|
|
type: "bar",
|
||
|
|
stack: "total",
|
||
|
|
label: labelOption2,
|
||
|
|
data: data3,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "3月第4周",
|
||
|
|
type: "bar",
|
||
|
|
stack: "total",
|
||
|
|
label: labelOption2,
|
||
|
|
data: data4,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
};
|
||
|
|
progressChart.setOption(option);
|
||
|
|
// 设置定时器, 每隔2s判断是否滚动到末尾, 是则重置为初始状态, 否则向前滚动一位
|
||
|
|
this.timerId = setInterval(() => {
|
||
|
|
if (option.dataZoom[0].endValue == dataX.length - 1) {
|
||
|
|
option.dataZoom[0].endValue = 3;
|
||
|
|
option.dataZoom[0].startValue = 0;
|
||
|
|
} else {
|
||
|
|
option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
|
||
|
|
option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
|
||
|
|
}
|
||
|
|
progressChart.setOption(option);
|
||
|
|
}, 2000);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
#center {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: space-between;
|
||
|
|
.dv-border-box-13 {
|
||
|
|
height: 540px;
|
||
|
|
padding: 0 20px;
|
||
|
|
padding-top: 30px;
|
||
|
|
.dvrow {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.progressChart {
|
||
|
|
width: 100%;
|
||
|
|
height: 300px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|