390 lines
12 KiB
Python
390 lines
12 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="45vh"
|
||
></Echart>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="16">
|
||
<el-card>
|
||
<div class="chartsTitle">废料原因统计</div>
|
||
<div id="barChart" style="width:100%;height: 45vh"></div>
|
||
</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: 20}"
|
||
>
|
||
<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="barOptions"
|
||
:className="chartsName"
|
||
height="45vh"
|
||
width="600px"
|
||
>
|
||
</charts>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-card>
|
||
<div class="chartsTitle">采购供应商表</div>
|
||
<charts
|
||
:id="chartId2"
|
||
:options="barOptions"
|
||
:className="chartsName"
|
||
height="45vh"
|
||
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: 20}"
|
||
>
|
||
<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="barOptions"
|
||
:className="chartsName"
|
||
height="45vh"
|
||
>
|
||
</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: 20}"
|
||
>
|
||
<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 {
|
||
chartId1: 'chart1',
|
||
chartId2: 'chart2',
|
||
chartId3: 'chart3',
|
||
barChart: null,
|
||
barChart1: null,
|
||
pieOptions: {},
|
||
barOptions: {},
|
||
activeName: '废料统计',
|
||
chartsName: "chartsName",
|
||
cdata: {
|
||
xData: ["气泡", "划痕"],
|
||
seriesData: [
|
||
{value: 10, name: "气泡"},
|
||
{value: 5, name: "破点"},
|
||
{value: 19, name: "划伤"},
|
||
{value: 6, name: "其他"},
|
||
]
|
||
},
|
||
chartData: {
|
||
xAxisData: ["气泡", "破点", "划伤", "其他"],
|
||
seriesData: [10, 5, 19, 6],
|
||
},
|
||
xAxisbar: ["供应商1", "供应商2", "供应商3", "供应商4", "供应商5", "供应商6", "供应商7"],
|
||
barData: [80, 95, 96, 96, 96, 98, 99],
|
||
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
|
||
},
|
||
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 = '<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.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) {
|
||
// console.log(tab);
|
||
// debugger;
|
||
},
|
||
},
|
||
mounted() {
|
||
this.drawChart();
|
||
this.barOptions = {
|
||
grid: {
|
||
top: '10%',
|
||
left: '3%',
|
||
right: '5%',
|
||
bottom: '1%',
|
||
containLabel: true
|
||
},
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: function (params) {
|
||
let color = params.color;//图例颜色
|
||
let htmlStr = '<div>';
|
||
htmlStr += params.name + '<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.seriesName + '：' + params.value + '%';
|
||
htmlStr += '</div>';
|
||
return htmlStr;
|
||
}
|
||
},
|
||
xAxis: {
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
splitLine: {
|
||
show: false, //去掉X轴分割线
|
||
},
|
||
data: this.xAxisbar,
|
||
},
|
||
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.barData,
|
||
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>
|