diff --git a/hb_client/src/views/statistics/materialStatistics.vue b/hb_client/src/views/statistics/materialStatistics.vue
index 80a9fc9..678a592 100644
--- a/hb_client/src/views/statistics/materialStatistics.vue
+++ b/hb_client/src/views/statistics/materialStatistics.vue
@@ -9,14 +9,21 @@
废料原因统计
-
+
+
@@ -54,9 +61,9 @@
采购物料表
@@ -67,9 +74,9 @@
采购供应商表
@@ -109,9 +116,9 @@
废料来源
@@ -157,17 +164,21 @@
},
data() {
return {
+ chartId0: 'chart0',
chartId1: 'chart1',
chartId2: 'chart2',
chartId3: 'chart3',
barChart: null,
barChart1: null,
pieOptions: {},
- barOptions: {},
+ barOptions1: {},
+ barOptions21: {},
+ barOptions22: {},
+ barOptions3: {},
activeName: '废料统计',
chartsName: "chartsName",
+ domHeight:'300px',
cdata: {
- xData: ["气泡", "划痕"],
seriesData: [
{value: 10, name: "气泡"},
{value: 5, name: "破点"},
@@ -175,11 +186,29 @@
{value: 6, name: "其他"},
]
},
- chartData: {
+ chartData1: {
xAxisData: ["气泡", "破点", "划伤", "其他"],
- seriesData: [10, 5, 19, 6],
+ seriesData: [30, 25, 35, 10],
},
- xAxisbar: ["供应商1", "供应商2", "供应商3", "供应商4", "供应商5", "供应商6", "供应商7"],
+ chartData21: {
+ xAxisData: ["物料1", "物料2", "物料3", "物料4", "物料5", "物料6", "物料7"],
+ seriesData: [800, 950, 960, 906, 600, 800, 900],
+ },
+ chartData22: {
+ xAxisData: ["供应商1", "供应商2", "供应商3", "供应商4", "供应商5", "供应商6", "供应商7"],
+ seriesData: [5, 20, 15, 25,10, 10,15],
+ },
+ chartData3: {
+ xAxisData: ["供应商1", "供应商2", "供应商3", "供应商4", "供应商5", "供应商6", "供应商7"],
+ seriesData:[2, 2, 4, 5,1, 0,1],
+ },
+ xAxisData1: ["气泡", "破点", "划伤", "其他"],
+ xAxisbar21: ["物料1", "物料2", "物料3", "物料4", "物料5", "物料6", "物料7"],
+ xAxisbar22: ["供应商1", "供应商2", "供应商3", "供应商4", "供应商5", "供应商6", "供应商7"],
+ xAxisbar3: ["供应商1", "供应商2", "供应商3", "供应商4", "供应商5", "供应商6", "供应商7"],
+ barData1: [30, 25, 35, 10],
+ barData21: [800, 950, 960, 906, 600, 800, 900],
+ barData22: [5, 20, 15, 25,10, 10,15],
barData: [80, 95, 96, 96, 96, 98, 99],
list: [
{id: 1, name: 'HIehd91', card: '3331', sco: 'REF-31', num: 2, reason: "气泡"},
@@ -233,87 +262,22 @@
immediate: true,
deep: true
},
+ created(){
+ let hei = document.getElementsByClassName('app-main')[0].clientHeight;
+ this.domHeight =( hei- 20)/2+'px';
+ },
methods: {
- drawChart() {
- let that = this;
- this.barChart = this.$echarts.init(document.getElementById('barChart'));
- this.barChart.setOption({
- grid: {
- top: '10%',
- left: '3%',
- right: '5%',
- bottom: '1%',
- containLabel: true
- },
- tooltip: {
- trigger: 'item',
- formatter: function (params) {
- let color = params.color;//图例颜色
- let htmlStr = '';
- htmlStr += params.seriesName + '
';
- htmlStr += '';
- htmlStr += params.name + '：' + params.value + '件';
- htmlStr += '
';
- return htmlStr;
- }
- },
- xAxis: {
- axisTick: {
- show: false
- },
- splitLine: {
- show: false, //去掉X轴分割线
- },
- data: that.chartData.xAxisData,
- },
- yAxis: {
- axisLine: {
- show: true,//y轴线
- },
- axisTick: {
- show: false//Y轴刻度线
- },
- axisLabel: {
- color: '#333333'//Y轴文本颜色
- },
- splitLine: {
- show: true, //Y轴分割线
- lineStyle: {
- color: '#dddddd'//Y轴分割线颜色
- }
- },
- },
- series: [{
- name: '废料统计',
- type: 'bar',
- barWidth: 20,
- data: that.chartData.seriesData,
- label: {
- show: true, //开启显示
- position: 'top', //在上方显示
- formatter: '{c}',//显示百分号
- textStyle: { //数值样式
- color: 'black',//字体颜色
- fontSize: 10//字体大小
- }
- },
- itemStyle: {
- color: '#409EFF'
- },
- }]
- });
- },
- handleClick(tab) {
+ handleClick() {
// console.log(tab);
// debugger;
},
},
mounted() {
- this.drawChart();
- this.barOptions = {
+ let that = this;
+ this.barOptions1 = {
grid: {
top: '10%',
- left: '3%',
+ left: '5%',
right: '5%',
bottom: '1%',
containLabel: true
@@ -323,9 +287,9 @@
formatter: function (params) {
let color = params.color;//图例颜色
let htmlStr = '';
- htmlStr += params.name + '
';
+ htmlStr += params.seriesName + '
';
htmlStr += '';
- htmlStr += params.seriesName + '：' + params.value + '%';
+ htmlStr += params.name + '：' + params.value + '件';
htmlStr += '
';
return htmlStr;
}
@@ -337,7 +301,7 @@
splitLine: {
show: false, //去掉X轴分割线
},
- data: this.xAxisbar,
+ data: that.chartData1.xAxisData,
},
yAxis: {
axisLine: {
@@ -357,10 +321,10 @@
},
},
series: [{
- name: '成品率',
+ name: '废料统计',
type: 'bar',
barWidth: 20,
- data: this.barData,
+ data: that.chartData1.seriesData,
label: {
show: true, //开启显示
position: 'top', //在上方显示
@@ -374,7 +338,202 @@
color: '#409EFF'
},
}]
- }
+ };
+ this.barOptions21 = {
+ grid: {
+ top: '10%',
+ left: '5%',
+ right: '5%',
+ bottom: '1%',
+ containLabel: true
+ },
+ tooltip: {
+ trigger: 'item',
+ formatter: function (params) {
+ let color = params.color;//图例颜色
+ let htmlStr = '';
+ htmlStr += '物料采购' + '
';
+ htmlStr += '';
+ htmlStr += params.name + '：' + params.value + '件';
+ htmlStr += '
';
+ return htmlStr;
+ }
+ },
+ xAxis: {
+ axisTick: {
+ show: false
+ },
+ splitLine: {
+ show: false, //去掉X轴分割线
+ },
+ data: this.chartData21.xAxisData,
+ },
+ yAxis: {
+ axisLine: {
+ show: true,//y轴线
+ },
+ axisTick: {
+ show: false//Y轴刻度线
+ },
+ axisLabel: {
+ color: '#333333'//Y轴文本颜色
+ },
+ splitLine: {
+ show: true, //Y轴分割线
+ lineStyle: {
+ color: '#dddddd'//Y轴分割线颜色
+ }
+ },
+ },
+ series: [{
+ name: '物料',
+ type: 'bar',
+ barWidth: 20,
+ data: this.chartData21.seriesData,
+ label: {
+ show: true, //开启显示
+ position: 'top', //在上方显示
+ formatter: '{c}',//显示百分号
+ textStyle: { //数值样式
+ color: 'black',//字体颜色
+ fontSize: 10//字体大小
+ }
+ },
+ itemStyle: {
+ color: '#409EFF'
+ },
+ }]
+ };
+ this.barOptions22 = {
+ grid: {
+ top: '10%',
+ left: '5%',
+ right: '5%',
+ bottom: '1%',
+ containLabel: true
+ },
+ tooltip: {
+ trigger: 'item',
+ formatter: function (params) {
+ let color = params.color;//图例颜色
+ let htmlStr = '';
+ htmlStr += params.seriesName + '
';
+ htmlStr += '';
+ htmlStr += params.name + '：' + params.value + '%';
+ htmlStr += '
';
+ return htmlStr;
+ }
+ },
+ xAxis: {
+ axisTick: {
+ show: false
+ },
+ splitLine: {
+ show: false, //去掉X轴分割线
+ },
+ data: this.chartData22.xAxisData,
+ },
+ yAxis: {
+ axisLine: {
+ show: true,//y轴线
+ },
+ axisTick: {
+ show: false//Y轴刻度线
+ },
+ axisLabel: {
+ color: '#333333'//Y轴文本颜色
+ },
+ splitLine: {
+ show: true, //Y轴分割线
+ lineStyle: {
+ color: '#dddddd'//Y轴分割线颜色
+ }
+ },
+ },
+ series: [{
+ name: '采购占比',
+ type: 'bar',
+ barWidth: 20,
+ data: this.chartData22.seriesData,
+ label: {
+ show: true, //开启显示
+ position: 'top', //在上方显示
+ formatter: '{c}',//显示百分号
+ textStyle: { //数值样式
+ color: 'black',//字体颜色
+ fontSize: 10//字体大小
+ }
+ },
+ itemStyle: {
+ color: '#409EFF'
+ },
+ }]
+ };
+ this.barOptions3 = {
+ grid: {
+ top: '10%',
+ left: '5%',
+ right: '5%',
+ bottom: '1%',
+ containLabel: true
+ },
+ tooltip: {
+ trigger: 'item',
+ formatter: function (params) {
+ let color = params.color;//图例颜色
+ let htmlStr = '';
+ htmlStr += params.seriesName + '
';
+ htmlStr += '';
+ htmlStr += params.name + '：' + params.value + '件';
+ htmlStr += '
';
+ return htmlStr;
+ }
+ },
+ xAxis: {
+ axisTick: {
+ show: false
+ },
+ splitLine: {
+ show: false, //去掉X轴分割线
+ },
+ data: this.chartData3.xAxisData,
+ },
+ yAxis: {
+ axisLine: {
+ show: true,//y轴线
+ },
+ axisTick: {
+ show: false//Y轴刻度线
+ },
+ axisLabel: {
+ color: '#333333'//Y轴文本颜色
+ },
+ splitLine: {
+ show: true, //Y轴分割线
+ lineStyle: {
+ color: '#dddddd'//Y轴分割线颜色
+ }
+ },
+ },
+ series: [{
+ name: '废料来源',
+ type: 'bar',
+ barWidth: 20,
+ data: this.chartData3.seriesData,
+ label: {
+ show: true, //开启显示
+ position: 'top', //在上方显示
+ formatter: '{c}',//显示百分号
+ textStyle: { //数值样式
+ color: 'black',//字体颜色
+ fontSize: 10//字体大小
+ }
+ },
+ itemStyle: {
+ color: '#409EFF'
+ },
+ }]
+ };
}
}
diff --git a/hb_client/src/views/statistics/progressStatistics.vue b/hb_client/src/views/statistics/progressStatistics.vue
index 0e5ee33..8afeeb4 100644
--- a/hb_client/src/views/statistics/progressStatistics.vue
+++ b/hb_client/src/views/statistics/progressStatistics.vue
@@ -7,7 +7,7 @@
@@ -18,7 +18,7 @@
:id="chartId1"
:options="barOptions"
:className="chartsName"
- height="45vh"
+ :height="domHeight"
width="100%"
>
@@ -31,7 +31,7 @@
:id="chartId2"
:options="barOptions1"
:className="chartsName"
- height="45vh"
+ :height="domHeight"
width="100%"
>
@@ -54,7 +54,6 @@
v-el-height-adaptive-table="{bottomOffset: 42}"
>
-
{{ scope.row.number }}
@@ -64,7 +63,6 @@
{{ scope.row.count }}
-
{{ scope.row.delivered_count }}
@@ -168,6 +166,7 @@
{value: 1, name: "逾期率"},
]
},
+ domHeight:'300px',
xAxisbar:["冷加工", "热弯", "钢化", "镀膜", "夹层", "包边", "装框"],
barData: [80, 95, 96, 96, 96, 98, 99],
xAxisbar1:[ "2021/09", "2021/10", "2021/11", "2021/12", "2022/01", "2022/02"],
@@ -217,6 +216,10 @@
immediate: true,
deep: true
},
+ created(){
+ let hei = document.getElementsByClassName('app-main')[0].clientHeight;
+ this.domHeight =( hei- 60)/2+'px';
+ },
methods: {
getList() {
this.orderLoading = true;
@@ -378,6 +381,7 @@
},
}]
}
+
}
}