541 lines
16 KiB
Python
541 lines
16 KiB
Python
<template>
|
||
<div class="app-container">
|
||
<el-tabs v-model="activeName" tab-position="left" type="border-card" @tab-click="handleClick">
|
||
<el-tab-pane label="废料统计" name="废料统计">
|
||
<el-row :gutter="5">
|
||
<el-col :span="8">
|
||
<el-card>
|
||
<div class="chartsTitle">废料原因占比</div>
|
||
<Echart
|
||
:options="pieOptions"
|
||
id="pieChart"
|
||
:height="domHeight"
|
||
></Echart>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="16">
|
||
<el-card>
|
||
<div class="chartsTitle">废料原因统计</div>
|
||
<charts
|
||
:id="chartId0"
|
||
:options="barOptions1"
|
||
:className="chartsName"
|
||
:height="domHeight"
|
||
width="600px"
|
||
>
|
||
</charts>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
<el-card style="margin-top: 5px">
|
||
<div class="chartsTitle">废料明细表</div>
|
||
<el-table
|
||
small
|
||
:data="list"
|
||
fit stripe
|
||
size="mini"
|
||
pager-count="3"
|
||
style="border-top: 1px solid #f5f5f5;"
|
||
height="100"
|
||
v-el-height-adaptive-table="{bottomOffset: 30}"
|
||
>
|
||
<el-table-column label="序号" type="index">
|
||
</el-table-column>
|
||
<el-table-column label="物料编号" prop="card">
|
||
</el-table-column>
|
||
<el-table-column label="物料型号" prop="sco">
|
||
</el-table-column>
|
||
<el-table-column label="物料名称" prop="name" show-overflow-tooltip>
|
||
</el-table-column>
|
||
<el-table-column label="报废原因" prop="reason">
|
||
</el-table-column>
|
||
<el-table-column label="报废数量" prop="num">
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-card>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="采购统计" name="采购统计">
|
||
<el-row :gutter="5" v-if="activeName==='采购统计'">
|
||
<el-col :span="12">
|
||
<el-card>
|
||
<div class="chartsTitle">采购物料表</div>
|
||
<charts
|
||
:id="chartId1"
|
||
:options="barOptions21"
|
||
:className="chartsName"
|
||
:height="domHeight"
|
||
width="600px"
|
||
>
|
||
</charts>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-card>
|
||
<div class="chartsTitle">采购供应商表</div>
|
||
<charts
|
||
:id="chartId2"
|
||
:options="barOptions22"
|
||
:className="chartsName"
|
||
:height="domHeight"
|
||
width="600px"
|
||
>
|
||
</charts>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
<div>
|
||
<el-card style="margin-top: 5px;">
|
||
<div class="chartsTitle">采购明细表</div>
|
||
<el-table
|
||
small
|
||
:data="list"
|
||
fit stripe
|
||
size="mini"
|
||
pager-count="3"
|
||
style="border-top: 1px solid #f5f5f5;"
|
||
height="100"
|
||
v-el-height-adaptive-table="{bottomOffset: 30}"
|
||
>
|
||
<el-table-column label="序号" type="index" width="50">
|
||
</el-table-column>
|
||
<el-table-column label="名称" prop="name" show-overflow-tooltip>
|
||
</el-table-column>
|
||
<el-table-column label="数量" prop="num" show-overflow-tooltip>
|
||
</el-table-column>
|
||
<el-table-column label="单位" prop="name" show-overflow-tooltip>
|
||
</el-table-column>
|
||
<el-table-column label="供应商" prop="sco" show-overflow-tooltip>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-card>
|
||
</div>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="废料来源" name="废料来源">
|
||
<el-row>
|
||
<el-card v-if="activeName==='废料来源'">
|
||
<div class="chartsTitle">废料来源</div>
|
||
<charts
|
||
:id="chartId3"
|
||
:options="barOptions3"
|
||
:className="chartsName"
|
||
:height="domHeight"
|
||
>
|
||
</charts>
|
||
</el-card>
|
||
<el-card style="margin-top: 5px">
|
||
<div class="chartsTitle">废料来源明细表</div>
|
||
<el-table
|
||
small
|
||
:data="list"
|
||
fit stripe
|
||
size="mini"
|
||
pager-count="3"
|
||
style="border-top: 1px solid #f5f5f5;"
|
||
height="100"
|
||
v-el-height-adaptive-table="{bottomOffset: 30}"
|
||
>
|
||
<el-table-column label="序号" type="index">
|
||
</el-table-column>
|
||
<el-table-column label="编号" prop="card">
|
||
</el-table-column>
|
||
<el-table-column label="名称" prop="name" show-overflow-tooltip>
|
||
</el-table-column>
|
||
<el-table-column label="数量" prop="num">
|
||
</el-table-column>
|
||
<el-table-column label="供应商" prop="sco" show-overflow-tooltip>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-card>
|
||
</el-row>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import charts from './charts.vue'
|
||
import Echart from '@/components/echart';
|
||
|
||
export default {
|
||
name: "materialStatistics",
|
||
components: {
|
||
charts,
|
||
Echart
|
||
},
|
||
data() {
|
||
return {
|
||
chartId0: 'chart0',
|
||
chartId1: 'chart1',
|
||
chartId2: 'chart2',
|
||
chartId3: 'chart3',
|
||
barChart: null,
|
||
barChart1: null,
|
||
pieOptions: {},
|
||
barOptions1: {},
|
||
barOptions21: {},
|
||
barOptions22: {},
|
||
barOptions3: {},
|
||
activeName: '废料统计',
|
||
chartsName: "chartsName",
|
||
domHeight:'300px',
|
||
cdata: {
|
||
seriesData: [
|
||
{value: 10, name: "气泡"},
|
||
{value: 5, name: "破点"},
|
||
{value: 19, name: "划伤"},
|
||
{value: 6, name: "其他"},
|
||
]
|
||
},
|
||
chartData1: {
|
||
xAxisData: ["气泡", "破点", "划伤", "其他"],
|
||
seriesData: [30, 25, 35, 10],
|
||
},
|
||
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],
|
||
},
|
||
list: [
|
||
{id: 1, name: 'HIehd91', card: '3331', sco: 'REF-31', num: 2, reason: "气泡"},
|
||
{id: 2, name: 'HIehd92', card: '3332', sco: 'REF-32', num: 1, reason: "划痕"},
|
||
{id: 3, name: 'HIehd93', card: '3333', sco: 'REF-33', num: 3, reason: "擦伤"},
|
||
{id: 4, name: 'HIehd94', card: '3334', sco: 'REF-34', num: 2, reason: "气泡"},
|
||
{id: 5, name: 'HIehd95', card: '3335', sco: 'REF-35', num: 1, reason: "擦伤"},
|
||
{id: 6, name: 'HIehd96', card: '3336', sco: 'REF-36', num: 2, reason: "气泡"},
|
||
{id: 7, name: 'HIehd97', card: '3337', sco: 'REF-37', num: 1, reason: "划痕"},
|
||
],
|
||
}
|
||
},
|
||
watch: {
|
||
cdata: {
|
||
handler(newData) {
|
||
this.pieOptions = {
|
||
color: [
|
||
"#32c5e9",
|
||
"#ffdb5c"
|
||
],
|
||
legend: {
|
||
data:["气泡", "破点", "划伤", "其他"],
|
||
top: 'top',
|
||
left: 'left',
|
||
orient: "vertical",
|
||
textStyle: {
|
||
color: "#556677", // 文字的颜色。
|
||
}
|
||
},
|
||
tooltip: {
|
||
trigger: "item",
|
||
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
||
},
|
||
toolbox: {
|
||
show: true
|
||
},
|
||
calculable: true,
|
||
series: [
|
||
{
|
||
name: '废料原因',
|
||
type: 'pie', // 设置图表类型为饼图
|
||
radius: '65%', // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
|
||
center: ['50%', '50%'], //圆心位置
|
||
data: newData.seriesData
|
||
}
|
||
]
|
||
}
|
||
},
|
||
immediate: true,
|
||
},
|
||
immediate: true,
|
||
deep: true
|
||
},
|
||
created(){
|
||
let hei = document.getElementsByClassName('app-main')[0].clientHeight;
|
||
this.domHeight =( hei- 20)/2+'px';
|
||
},
|
||
methods: {
|
||
handleClick() {
|
||
// console.log(tab);
|
||
// debugger;
|
||
},
|
||
},
|
||
mounted() {
|
||
let that = this;
|
||
this.barOptions1 = {
|
||
grid: {
|
||
top: '10%',
|
||
left: '5%',
|
||
right: '5%',
|
||
bottom: '1%',
|
||
containLabel: true
|
||
},
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: function (params) {
|
||
let color = params.color;//图例颜色
|
||
let htmlStr = '<div>';
|
||
htmlStr += params.seriesName + '<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.name + '：' + params.value + '件';
|
||
htmlStr += '</div>';
|
||
return htmlStr;
|
||
}
|
||
},
|
||
xAxis: {
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
splitLine: {
|
||
show: false, //去掉X轴分割线
|
||
},
|
||
data: that.chartData1.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.chartData1.seriesData,
|
||
label: {
|
||
show: true, //开启显示
|
||
position: 'top', //在上方显示
|
||
formatter: '{c}',//显示百分号
|
||
textStyle: { //数值样式
|
||
color: 'black',//字体颜色
|
||
fontSize: 10//字体大小
|
||
}
|
||
},
|
||
itemStyle: {
|
||
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 = '<div>';
|
||
htmlStr += '物料采购' + '<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.name + '：' + params.value + '件';
|
||
htmlStr += '</div>';
|
||
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 = '<div>';
|
||
htmlStr += params.seriesName + '<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.name + '：' + params.value + '%';
|
||
htmlStr += '</div>';
|
||
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 = '<div>';
|
||
htmlStr += params.seriesName + '<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.name + '：' + params.value + '件';
|
||
htmlStr += '</div>';
|
||
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'
|
||
},
|
||
}]
|
||
};
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.chartsTitle {
|
||
text-align: center;
|
||
height: 35px;
|
||
line-height: 35px;
|
||
font-size: 22px;
|
||
}
|
||
</style>
|