From 886cba24dc9d7916b5e9362493646f299da6765b Mon Sep 17 00:00:00 2001 From: shijing Date: Thu, 24 Mar 2022 15:10:26 +0800 Subject: [PATCH] 0324 --- hb_client/src/views/bigScreen/bottomLeft.vue | 331 +++++++++---------- hb_client/src/views/bigScreen/index.vue | 43 ++- 2 files changed, 177 insertions(+), 197 deletions(-) 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); + } + }) + }, } }