0324
This commit is contained in:
parent
9c9982ab06
commit
886cba24dc
|
|
@ -31,201 +31,166 @@
|
|||
return {
|
||||
options: {},
|
||||
cdata: {
|
||||
category: [
|
||||
"JH5jhx463-1",
|
||||
"JH5jhx463-2",
|
||||
"JH5jhx463-3",
|
||||
"JH5jhx463-4",
|
||||
"JH5jhx463-5",
|
||||
"JH5jhx463-6",
|
||||
"JH5jhx463-7",
|
||||
"JH5jhx463-8",
|
||||
"JH5jhx463-9",
|
||||
"JH5jhx463-10",
|
||||
"JH5jhx463-11",
|
||||
"JH5jhx463-12",
|
||||
"JH5jhx463-13",
|
||||
"JH5jhx463-14",
|
||||
"JH5jhx463-15"
|
||||
],
|
||||
planData: [
|
||||
18092,
|
||||
20728,
|
||||
24045,
|
||||
28348,
|
||||
32808,
|
||||
36097,
|
||||
39867,
|
||||
18092,
|
||||
20728,
|
||||
24045,
|
||||
28348,
|
||||
32808,
|
||||
36097,
|
||||
39867,
|
||||
44715,
|
||||
],
|
||||
barData: [
|
||||
9600,
|
||||
19000,
|
||||
19500,
|
||||
20500,
|
||||
19500,
|
||||
28500,
|
||||
31900,
|
||||
12500,
|
||||
14000,
|
||||
21500,
|
||||
23200,
|
||||
24450,
|
||||
25250,
|
||||
33300,
|
||||
40715
|
||||
],
|
||||
rateData: []
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.setData();
|
||||
props:{
|
||||
category:{
|
||||
type:Array,
|
||||
default:()=>{
|
||||
return []
|
||||
}
|
||||
},
|
||||
planData:{
|
||||
type:Array,
|
||||
default:()=>{
|
||||
return []
|
||||
}
|
||||
},
|
||||
realData:{
|
||||
type:Array,
|
||||
default:()=>{
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
cdata: {
|
||||
handler(newData) {
|
||||
this.options = {
|
||||
/*tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: "rgba(255,255,255,0.1)",
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
label: {
|
||||
show: true,
|
||||
backgroundColor: "#7B7DDC"
|
||||
}
|
||||
}
|
||||
},*/
|
||||
tooltip: {
|
||||
trigger: 'axis', //触发类型；轴触发，axis则鼠标hover到一条柱状图显示全部数据，item则鼠标hover到折线点显示相应数据，
|
||||
axisPointer: { //坐标轴指示器，坐标轴触发有效，
|
||||
type: 'cross', //默认为line，line直线，cross十字准星，shadow阴影
|
||||
crossStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
},
|
||||
/*tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: function (params) {
|
||||
debugger;
|
||||
console.log(params);
|
||||
let color = params.color;//图例颜色
|
||||
let htmlStr = '<div>';
|
||||
htmlStr += params.name + '<br/>';
|
||||
htmlStr += '<span style="height:10px;width:10px;font-size:12px;border-radius:5px;margin-right:5px;font-family:Consolas;display:inline-block;background:' + color + ';"></span>';
|
||||
htmlStr += params.seriesName + '：' + params.value + '%';
|
||||
htmlStr += '</div>';
|
||||
return htmlStr;
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
//shared: true,
|
||||
crosshairs: true,
|
||||
valueSuffix: yAxisSuffix,
|
||||
useHTML: true,
|
||||
formatter: function() {
|
||||
return "<div style='width:300px;word-wrap:break-word;white-space:normal;'>"
|
||||
+"<b>录入时间: "+tipsbean[0][this.series.data.indexOf(this.point)].medDate+"</b><br/>"
|
||||
+tipsbean[1][this.series.data.indexOf(this.point)].itemName+":"+tipsbean[1][this.series.data.indexOf(this.point)].medResult+"<br/>"
|
||||
+tipsbean[2][this.series.data.indexOf(this.point)].itemName+":"+tipsbean[2][this.series.data.indexOf(this.point)].medResult+"<br/>"
|
||||
+tipsbean[3][this.series.data.indexOf(this.point)].itemName+":"+tipsbean[3][this.series.data.indexOf(this.point)].medResult+"<br/>"
|
||||
+tipsbean[0][this.series.data.indexOf(this.point)].itemName+":"+tipsbean[0][this.series.data.indexOf(this.point)].medResult+"<br/>"
|
||||
+"</div>";
|
||||
}
|
||||
},*/
|
||||
legend: {
|
||||
data: ["已完成", "计划完成"],
|
||||
textStyle: {
|
||||
color: "#B4B4B4"
|
||||
},
|
||||
top: "0%"
|
||||
},
|
||||
grid: {
|
||||
x: "8%",
|
||||
width: "88%",
|
||||
y: "4%"
|
||||
},
|
||||
xAxis: {
|
||||
data: newData.category,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#B4B4B4"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yAxis:{
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#B4B4B4"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: "{value} "
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "已完成",
|
||||
type: "bar",
|
||||
barWidth: 10,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: 5,
|
||||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{offset: 0, color: "#956FD4"},
|
||||
{offset: 1, color: "#3EACE5"}
|
||||
])
|
||||
}
|
||||
},
|
||||
data: newData.barData
|
||||
},
|
||||
{
|
||||
name: "计划完成",
|
||||
type: "bar",
|
||||
barGap: "-100%",
|
||||
barWidth: 10,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: 5,
|
||||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{offset: 0, color: "rgba(156,107,211,0.8)"},
|
||||
{offset: 0.2, color: "rgba(156,107,211,0.5)"},
|
||||
{offset: 1, color: "rgba(156,107,211,0.2)"}
|
||||
])
|
||||
}
|
||||
},
|
||||
z: -12,
|
||||
data: newData.planData
|
||||
}
|
||||
]
|
||||
mounted() {
|
||||
let that=this;
|
||||
this.setData();
|
||||
this.options = {
|
||||
/*tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: "rgba(255,255,255,0.1)",
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
label: {
|
||||
show: true,
|
||||
backgroundColor: "#7B7DDC"
|
||||
}
|
||||
}
|
||||
},*/
|
||||
tooltip: {
|
||||
trigger: 'axis', //触发类型；轴触发，axis则鼠标hover到一条柱状图显示全部数据，item则鼠标hover到折线点显示相应数据，
|
||||
axisPointer: { //坐标轴指示器，坐标轴触发有效，
|
||||
type: 'cross', //默认为line，line直线，cross十字准星，shadow阴影
|
||||
crossStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
},
|
||||
/*tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: function (params) {
|
||||
debugger;
|
||||
console.log(params);
|
||||
let color = params.color;//图例颜色
|
||||
let htmlStr = '<div>';
|
||||
htmlStr += params.name + '<br/>';
|
||||
htmlStr += '<span style="height:10px;width:10px;font-size:12px;border-radius:5px;margin-right:5px;font-family:Consolas;display:inline-block;background:' + color + ';"></span>';
|
||||
htmlStr += params.seriesName + '：' + params.value + '%';
|
||||
htmlStr += '</div>';
|
||||
return htmlStr;
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
//shared: true,
|
||||
crosshairs: true,
|
||||
valueSuffix: yAxisSuffix,
|
||||
useHTML: true,
|
||||
formatter: function() {
|
||||
return "<div style='width:300px;word-wrap:break-word;white-space:normal;'>"
|
||||
+"<b>录入时间: "+tipsbean[0][this.series.data.indexOf(this.point)].medDate+"</b><br/>"
|
||||
+tipsbean[1][this.series.data.indexOf(this.point)].itemName+":"+tipsbean[1][this.series.data.indexOf(this.point)].medResult+"<br/>"
|
||||
+tipsbean[2][this.series.data.indexOf(this.point)].itemName+":"+tipsbean[2][this.series.data.indexOf(this.point)].medResult+"<br/>"
|
||||
+tipsbean[3][this.series.data.indexOf(this.point)].itemName+":"+tipsbean[3][this.series.data.indexOf(this.point)].medResult+"<br/>"
|
||||
+tipsbean[0][this.series.data.indexOf(this.point)].itemName+":"+tipsbean[0][this.series.data.indexOf(this.point)].medResult+"<br/>"
|
||||
+"</div>";
|
||||
}
|
||||
},*/
|
||||
legend: {
|
||||
data: [" 计划完成", " 已完成 "],
|
||||
textStyle: {
|
||||
color: "#B4B4B4"
|
||||
},
|
||||
top: "0%"
|
||||
},
|
||||
grid: {
|
||||
x: "8%",
|
||||
width: "88%",
|
||||
y: "4%"
|
||||
},
|
||||
xAxis: {
|
||||
data: that.category,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#B4B4B4"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yAxis:{
|
||||
splitLine: {
|
||||
type:"dashed",
|
||||
color: "#B4B4B4",
|
||||
width:"1",
|
||||
// show: true,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#B4B4B4"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: "{value} "
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "已完成",
|
||||
type: "bar",
|
||||
barWidth: 10,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: 5,
|
||||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{offset: 0, color: "#956FD4"},
|
||||
{offset: 1, color: "#3EACE5"}
|
||||
])
|
||||
}
|
||||
},
|
||||
data: that.realData
|
||||
},
|
||||
{
|
||||
name: "计划完成",
|
||||
type: "bar",
|
||||
barGap: "-100%",
|
||||
barWidth: 10,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: 5,
|
||||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{offset: 0, color: "rgba(156,107,211,0.8)"},
|
||||
{offset: 0.2, color: "rgba(156,107,211,0.5)"},
|
||||
{offset: 1, color: "rgba(156,107,211,0.2)"}
|
||||
])
|
||||
}
|
||||
},
|
||||
z: -12,
|
||||
data: that.planData
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 根据自己的业务情况修改
|
||||
setData() {
|
||||
for (let i = 0; i < this.cdata.barData.length - 1; i++) {
|
||||
let rate = this.cdata.barData[i] / this.cdata.planData[i];
|
||||
/*for (let i = 0; i < this.cdata.realData.length - 1; i++) {
|
||||
let rate = this.cdata.realData[i] / this.cdata.planData[i];
|
||||
this.cdata.rateData.push(rate.toFixed(2));
|
||||
}
|
||||
}*/
|
||||
},
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -104,6 +104,9 @@
|
|||
<dv-border-box-13>
|
||||
<bottomLeft
|
||||
v-if="limitedTwo"
|
||||
:category="category"
|
||||
:planData="planData"
|
||||
:realData="realData"
|
||||
/>
|
||||
</dv-border-box-13>
|
||||
</div>
|
||||
|
|
@ -126,7 +129,7 @@
|
|||
import bottomRight from './bottomRight'
|
||||
import {getPlanGantt} from "@/api/srm";
|
||||
import {getProductionplanList} from "@/api/pm";
|
||||
import {getProcessYield, productCount, getProcessNow, planCount, orderCount} from "@/api/srm";
|
||||
import {getProcessYield, productCount, getProcessNow} from "@/api/srm";
|
||||
import {getContractList, getOrderList} from "@/api/sam";
|
||||
import {getArticles} from "@/api/cms";
|
||||
|
||||
|
|
@ -139,10 +142,11 @@
|
|||
dateDay: null,
|
||||
dateYear: null,
|
||||
dateWeek: null,
|
||||
planGanttList: [],
|
||||
numberShow: false,
|
||||
processRate: false,
|
||||
listUser: false,
|
||||
listNews: false,
|
||||
listProcess: false,
|
||||
create_time_start: '',
|
||||
titleItem: [
|
||||
{
|
||||
|
|
@ -428,7 +432,10 @@
|
|||
// columnWidth: [50],
|
||||
align: ['center']
|
||||
},
|
||||
weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
|
||||
weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
|
||||
category:[],
|
||||
planData:[],
|
||||
realData:[],
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
|
@ -480,16 +487,6 @@
|
|||
this.dateWeek = this.weekday[new Date().getDay()]
|
||||
}, 1000)
|
||||
},
|
||||
getPageData() {
|
||||
let that = this;
|
||||
getPlanGantt({type: 'big_screen'}).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.planGanttList = res.data.results;
|
||||
} else {
|
||||
that.$message.error(res.msg);
|
||||
}
|
||||
})
|
||||
},
|
||||
cancelLoading() {
|
||||
setTimeout(() => {
|
||||
this.loading = false
|
||||
|
|
@ -676,6 +673,7 @@
|
|||
//企业资讯
|
||||
getArticle() {
|
||||
let that = this;
|
||||
that.listNews = false;
|
||||
getArticles({type: 'big_screen', page: 0}).then((response) => {
|
||||
if (response.data) {
|
||||
// this.configArticle = response.data;
|
||||
|
|
@ -694,11 +692,28 @@
|
|||
data.push(obj)
|
||||
});
|
||||
that.configArticle.data = data;
|
||||
that.listNews = true;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
//任务完成进度
|
||||
getPageData() {
|
||||
let that = this;
|
||||
that.listNews = false;
|
||||
getPlanGantt({type: 'big_screen'}).then(res => {
|
||||
if (res.code === 200) {
|
||||
let list = res.data.results;
|
||||
list.forEach(item=>{
|
||||
that.category.push(item.number);
|
||||
that.planData.push(item.count);
|
||||
that.realData.push(item.count_ok);
|
||||
})
|
||||
that.listNews = true;
|
||||
} else {
|
||||
that.$message.error(res.msg);
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue