diff --git a/hb_client/src/views/bigScreen/bottomLeft.vue b/hb_client/src/views/bigScreen/bottomLeft.vue
index 6548da7..db1b193 100644
--- a/hb_client/src/views/bigScreen/bottomLeft.vue
+++ b/hb_client/src/views/bigScreen/bottomLeft.vue
@@ -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 = '';
- htmlStr += params.name + '
';
- htmlStr += '';
- htmlStr += params.seriesName + '：' + params.value + '%';
- htmlStr += '
';
- return htmlStr;
- }
- },
- tooltip: {
- //shared: true,
- crosshairs: true,
- valueSuffix: yAxisSuffix,
- useHTML: true,
- formatter: function() {
- return ""
- +"录入时间: "+tipsbean[0][this.series.data.indexOf(this.point)].medDate+"
"
- +tipsbean[1][this.series.data.indexOf(this.point)].itemName+":"+tipsbean[1][this.series.data.indexOf(this.point)].medResult+"
"
- +tipsbean[2][this.series.data.indexOf(this.point)].itemName+":"+tipsbean[2][this.series.data.indexOf(this.point)].medResult+"
"
- +tipsbean[3][this.series.data.indexOf(this.point)].itemName+":"+tipsbean[3][this.series.data.indexOf(this.point)].medResult+"
"
- +tipsbean[0][this.series.data.indexOf(this.point)].itemName+":"+tipsbean[0][this.series.data.indexOf(this.point)].medResult+"
"
- +"
";
- }
- },*/
- 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 = '';
+ htmlStr += params.name + '
';
+ htmlStr += '';
+ htmlStr += params.seriesName + '：' + params.value + '%';
+ htmlStr += '
';
+ return htmlStr;
+ }
+ },
+ tooltip: {
+ //shared: true,
+ crosshairs: true,
+ valueSuffix: yAxisSuffix,
+ useHTML: true,
+ formatter: function() {
+ return ""
+ +"录入时间: "+tipsbean[0][this.series.data.indexOf(this.point)].medDate+"
"
+ +tipsbean[1][this.series.data.indexOf(this.point)].itemName+":"+tipsbean[1][this.series.data.indexOf(this.point)].medResult+"
"
+ +tipsbean[2][this.series.data.indexOf(this.point)].itemName+":"+tipsbean[2][this.series.data.indexOf(this.point)].medResult+"
"
+ +tipsbean[3][this.series.data.indexOf(this.point)].itemName+":"+tipsbean[3][this.series.data.indexOf(this.point)].medResult+"
"
+ +tipsbean[0][this.series.data.indexOf(this.point)].itemName+":"+tipsbean[0][this.series.data.indexOf(this.point)].medResult+"
"
+ +"
";
+ }
+ },*/
+ 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));
- }
+ }*/
},
}
}
diff --git a/hb_client/src/views/bigScreen/index.vue b/hb_client/src/views/bigScreen/index.vue
index 364deba..5bb5200 100644
--- a/hb_client/src/views/bigScreen/index.vue
+++ b/hb_client/src/views/bigScreen/index.vue
@@ -104,6 +104,9 @@
@@ -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);
+ }
+ })
+ },
}
}