From 5d9fb7a0c20ea66d5900341fb6e972da4c6bb3b5 Mon Sep 17 00:00:00 2001 From: value <z1292839451@163.com> Date: 星期四, 31 八月 2023 17:12:19 +0800 Subject: [PATCH] Merge remote-tracking branch 'origin/master' --- src/views/chart/work/index.vue | 122 ++++++++++++++++++++++++---------------- 1 files changed, 73 insertions(+), 49 deletions(-) diff --git a/src/views/chart/work/index.vue b/src/views/chart/work/index.vue index e04f144..9689a03 100644 --- a/src/views/chart/work/index.vue +++ b/src/views/chart/work/index.vue @@ -6,8 +6,7 @@ <el-card> <el-form :rules="rules" ref="formInline" :inline="true" :model="formInline" class="demo-form-inline"> - <el-form-item prop="date"> - <p><span>*</span>妫�娴嬫棩鏈�:</p> + <el-form-item prop="date" label="妫�娴嬫棩鏈�:"> <el-date-picker v-model="formInline.date" format="yyyy-MM-dd" @@ -18,8 +17,7 @@ end-placeholder="缁撴潫鏃ユ湡"> </el-date-picker> </el-form-item> - <el-form-item prop="type"> - <p><span>*</span>妫�楠岀被鍨�:</p> + <el-form-item prop="type" label="妫�楠岀被鍨�:"> <el-select v-model="formInline.type" placeholder="閲囪喘鍏ュ簱"> <el-option label="鍘熸潗鏂�" value="0"></el-option> <el-option label="鎴愬搧" value="1"></el-option> @@ -91,27 +89,33 @@ } }, mounted(){ - // this.initLeaderStatiChart(""); - this.initLeaderTimelyChart("leaderTimely"); - this.initTesterStatiChart("testerStati"); - this.initTesterTimelyChart("testerTimely"); + this.queryData(); }, methods: { async queryData(){ - let date = this.formInline.date; + let date = []; + let type; + if(this.formInline.date == null || this.formInline.date == ""){ + let currentDate = new Date(); + let year = currentDate.getFullYear(); + let month = currentDate.getMonth() + 1; + let day = currentDate.getDate(); + date.push(year +"-" + month + "-01"); + date.push(year +"-" + month + "-" + day); + type = 0; + }else{ + date = this.formInline.date; + type = this.formInline.type; + } let obj = { startTime : date[0], endTime : date[1], - type : this.formInline.type + type : type } const dutyMater = await getDutyMater(obj); const dutyTimely = await getDutyTimely(obj); const executeMater = await getExecuteMater(obj); const executeTimely = await getExecuteTimely(obj); - console.log("dm",dutyMater.data); - console.log("dt",dutyTimely.data); - console.log("em",executeMater.data.length); - console.log("et",executeTimely.data); this.initLeaderStatiChart("leaderStati",dutyMater.data); this.initLeaderTimelyChart("leaderTimely",dutyTimely.data); this.initTesterStatiChart("testerStati",executeMater.data); @@ -182,7 +186,7 @@ series: [ { name: '宸插畬鎴�', - barWidth: '20%', + barWidth: '30%', type: 'bar', stack: 'one', emphasis: emphasisStyle, @@ -207,22 +211,25 @@ option && myChart.setOption(option); }, initTesterStatiChart(id,executeMater){ - console.log("qqq----",executeMater); var chartDom = document.getElementById(id); var myChart = echarts.init(chartDom); window.addEventListener('resize', function() { myChart.resize(); }); var option; - + let max = 0; let xAxisData = []; let data1 = []; let data2 = []; - // for(let i=0;i<executeMater.length;i++){ - // xAxisData.push(executeMater[i].name); - // data1.push(executeMater[i].finsh); - // data2.push(executeMater[i].unfinsh); - // } + for(let i=0;i<executeMater.length;i++){ + xAxisData.push(executeMater[i].name); + data1.push(executeMater[i].finsh); + data2.push(executeMater[i].unfinsh); + let sum = executeMater[i].finsh + executeMater[i].unfinsh; + if(sum > max){ + max = sum; + } + } var emphasisStyle = { itemStyle: { shadowBlur: 10, @@ -244,8 +251,8 @@ }, yAxis: { min: 0, - max: 60, - interval: 10, + max: max, + interval: 1, }, grid: { bottom: 100 @@ -255,6 +262,7 @@ name: '鏁版嵁1', type: 'bar', stack: 'one', + barWidth: '30%', emphasis: emphasisStyle, data: data1, itemStyle:{ @@ -265,6 +273,7 @@ name: '鏁版嵁2', type: 'bar', stack: 'one', + barWidth: '30%', emphasis: emphasisStyle, data: data2, itemStyle:{ @@ -282,6 +291,18 @@ myChart.resize(); }); var option; + let xAxisData = []; + let data1 = []; + let data2 = []; + let yAxisData1 = 0; + for(let i=0;i<dutyTimely.length;i++){ + xAxisData.push(dutyTimely[i].name); + data1.push(dutyTimely[i].total); + data2.push(dutyTimely[i].timely); + if(dutyTimely[i].total > yAxisData1){ + yAxisData1 = dutyTimely[i].total; + } + } option = { tooltip: { trigger: 'axis', @@ -299,12 +320,12 @@ { name: '濮撳悕', type: 'category', - data: ['娌愮',], + data: xAxisData, axisPointer: { type: 'shadow' }, - itemStyle: { - top: '20px' + nameTextStyle:{ + padding:20 } } ], @@ -313,7 +334,7 @@ type: 'value', name: '鏁伴噺', min: 0, - max: 10, + max: yAxisData1, interval: 1, axisLabel: { formatter: '{value}' @@ -334,13 +355,13 @@ { name: '鏍峰搧鏁�', type: 'bar', - barWidth: '20%', + barWidth: '30%', tooltip: { valueFormatter: function (value) { return value; } }, - data: [4.0], + data: data1, itemStyle: { color: '#9fceff' } @@ -348,19 +369,19 @@ { name: '瀹屾垚鍙婃椂鐜�', type: 'line', + yAxisIndex: 1, tooltip: { valueFormatter: function (value) { return value + ' %'; } }, - data: [7.5], + data: data2, itemStyle: { color: '#d2eec5' } }, ] }; - option && myChart.setOption(option); }, initTesterTimelyChart(id,executeTimely){ @@ -370,6 +391,18 @@ myChart.resize(); }); var option; + let xAxisData = []; + let data1 = []; + let data2 = []; + let yAxisData1 = 0; + for(let i=0;i<executeTimely.length;i++){ + xAxisData.push(executeTimely[i].name); + data1.push(executeTimely[i].total); + data2.push(executeTimely[i].timely); + if(executeTimely[i].total > yAxisData1){ + yAxisData1 = executeTimely[i].total; + } + } option = { tooltip: { trigger: 'axis', @@ -387,7 +420,7 @@ xAxis: [ { type: 'category', - data: ["","",""], + data: xAxisData, axisPointer: { type: 'shadow' } @@ -398,8 +431,8 @@ type: 'value', name: '', min: 0, - max: 50, - interval: 5, + max: yAxisData1, + interval: 1, axisLabel: { formatter: '{value}' } @@ -419,12 +452,13 @@ { name: '椤圭洰鏁�', type: 'bar', + barWidth: '30%', tooltip: { valueFormatter: function (value) { return value ; } }, - data: [2.0, 4.9, 7.0], + data: data1, itemStyle: { color: '#5087ec' } @@ -438,7 +472,7 @@ return value + ' %'; } }, - data: [2.0, 2.2, 3.3], + data: data2, itemStyle: { color: '#68bbc4' } @@ -465,24 +499,14 @@ z-index: 10; .demo-form-inline{ margin: 0px 10px; - p{ - margin: 0; - font-size: 16px; - font-weight: bold; - span{ - font-size: 16px; - font-weight: bold; - color: red; - } - } .buttons{ - margin: 40px 0px 0px 50%; + margin-left: 10%; } } } .work-center{ margin: 0px 0px 150px 10px; - padding: 18vh 0px 5px 0px; + padding: 13vh 0px 5px 0px; .el-card{ margin: 5px 0px; height:500px; -- Gitblit v1.9.3