yinq 7 months ago
commit 6c240afefb

@ -817,7 +817,7 @@ export default {
},
legend: {
itemWidth: 3 * vw,
data: ['不良数', '一次不合格率', '目标'],
data: ['不良数', '不合格率', '目标'],
textStyle: {
color: "#d1e6eb",
margin: 15,

@ -0,0 +1,274 @@
<template>
<div class="app-container">
<el-form :inline="true" :model="form" ref="form">
<el-form-item label="年度" prop="year">
<el-date-picker
v-model="form.year"
type="year"
format="yyyy"
value-format="yyyy"
placeholder="选择年">
</el-date-picker>
</el-form-item>
<el-form-item label="产线" prop="productionLine">
<el-select v-model="form.productionLine" placeholder="选择产线">
<el-option :label="i.label" :value="i.value" v-for="i in option"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit"></el-button>
<el-button @click="resetForm('form')"></el-button>
</el-form-item>
</el-form>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="工序"
width="150">
</el-table-column>
<el-table-column :label="i.label" v-for="i in tableHead">
<el-table-column
v-for="item in i"
:prop="item.value"
:label="item.label"
width="120">
</el-table-column>
</el-table-column>
</el-table>
</div>
</template>
<script>
import {findProductLineList} from '@//api/base/productLine'
import {parseTime} from '@//utils/ruoyi'
import {
boxTraceabilityDetailReport,
boxTraceabilityReport,
} from '@//api/report/reportAPI'
export default {
name: 'ProductOffLine',
data() {
return {
tableData: [
{
date: '2016-05-03',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-04',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-01',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-08',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-06',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-07',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}],
form: {},
option: [
{
value: '11',
label: '一号线'
},
{
value: '22',
label: '二号线'
},
],
tableHead:[
{
label:'今年1月',
children:[
{
label:'不良数',
value:'column1_1',
},
{
label:'总产量',
value:'column1_2',
},
{
label:'不良率',
value:'column1_3',
},
]
},
{
label:'今年1月',
children:[
{
label:'不良数',
value:'column1_1',
},
{
label:'总产量',
value:'column1_2',
},
{
label:'不良率',
value:'column1_3',
},
]
},
{
label:'今年1月',
children:[
{
label:'不良数',
value:'column1_1',
},
{
label:'总产量',
value:'column1_2',
},
{
label:'不良率',
value:'column1_3',
},
]
},
{
label:'今年1月',
children:[
{
label:'不良数',
value:'column1_1',
},
{
label:'总产量',
value:'column1_2',
},
{
label:'不良率',
value:'column1_3',
},
]
},
{
label:'今年1月',
children:[
{
label:'不良数',
value:'column1_1',
},
{
label:'总产量',
value:'column1_2',
},
{
label:'不良率',
value:'column1_3',
},
]
},
{
label:'今年1月',
children:[
{
label:'不良数',
value:'column1_1',
},
{
label:'总产量',
value:'column1_2',
},
{
label:'不良率',
value:'column1_3',
},
]
},
{
label:'今年1月',
children:[
{
label:'不良数',
value:'column1_1',
},
{
label:'总产量',
value:'column1_2',
},
{
label:'不良率',
value:'column1_3',
},
]
},
{
label:'今年1月',
children:[
{
label:'不良数',
value:'column1_1',
},
{
label:'总产量',
value:'column1_2',
},
{
label:'不良率',
value:'column1_3',
},
]
},
]
}
},
created() {
},
methods: {
onSubmit(){
console.log(this.form)
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>
<style lang="less" scoped>
/deep/ .el-table .cell{
text-align: center !important;
}
</style>

@ -0,0 +1,167 @@
<template>
<div class="app-container">
<el-form :inline="true" :model="form" ref="form">
<el-form-item label="工厂" prop="factory">
<el-select v-model="form.factory" placeholder="选择工厂">
<el-option :label="i.label" :value="i.value" v-for="i in option"></el-option>
</el-select>
</el-form-item>
<el-form-item label="产线" prop="productionLine">
<el-select v-model="form.productionLine" placeholder="选择产线">
<el-option :label="i.label" :value="i.value" v-for="i in option1"></el-option>
</el-select>
</el-form-item>
<el-form-item label="下线时间" prop="date">
<el-date-picker
v-model="form.date"
type="daterange"
format="yyyy-mm-dd"
value-format="yyyy-mm-dd"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="getList"></el-button>
<el-button @click="resetForm('form')"></el-button>
</el-form-item>
</el-form>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
type="index"
label="序号"
width="180">
</el-table-column>
<el-table-column
prop="type"
label="产品型号">
</el-table-column>
<el-table-column
prop="num"
label="问题数量">
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="form.pageNum"
:limit.sync="form.pageSize"
@pagination="getList"
/>
<h3 style="font-weight: 600">高故障Top20柱状图</h3>
<div style="width: 100%;height: 30vw">
<Chart ref="chart1"></Chart>
</div>
</div>
</template>
<script>
import Chart from "@/components/board/Chart";
export default {
name: 'ProductOffLine',
components:{
Chart,
},
data() {
return {
total:100,
form: {
pageNum:1,
pageSize:10
},
option: [
{
value: '11',
label: '工厂一'
},
{
value: '22',
label: '工厂二'
},
],
option1: [
{
value: '11',
label: '产线一'
},
{
value: '22',
label: '产线二'
},
],
tableData: [
{
type:'1',
num:1,
},
{
type:'1',
num:1,
},
{
type:'1',
num:1,
},
{
type:'1',
num:1,
},
{
type:'1',
num:1,
},
]
}
},
mounted() {
this.$refs.chart1.setData({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
position:'top',
boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
},
series: [
{
name: '数量',
type: 'bar',
data: [18203, 23489, 29034, 104970, 131744, 630230]
},
]
})
},
methods: {
getList(){
console.log(this.form)
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>
<style lang="less" scoped>
/deep/ .el-table .cell{
text-align: center !important;
}
</style>

@ -0,0 +1,282 @@
<template>
<div class="app-container">
<el-form :inline="true" :model="form" ref="form">
<el-form-item label="年份" prop="year">
<el-date-picker
v-model="form.year"
type="year"
placeholder="选择年">
</el-date-picker>
</el-form-item>
<el-form-item label="周期" prop="period">
<el-select v-model="form.period" placeholder="选择周期">
<el-option :label="i.label" :value="i.value" v-for="i in option"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="getList"></el-button>
<el-button @click="resetForm('form')"></el-button>
</el-form-item>
</el-form>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="type"
label="工序"
width="150">
</el-table-column>
<el-table-column
v-for="i in tableHead"
:prop="i.value"
:label="i.label"
width="120">
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="form.pageNum"
:limit.sync="form.pageSize"
@pagination="getList"
/>
<h3 style="font-weight: 600">焊漏率折线图</h3>
<div style="width: 100%;height: 30vw">
<Chart ref="chart1"></Chart>
</div>
</div>
</template>
<script>
import Chart from "@/components/board/Chart";
export default {
name: 'ProductOffLine',
components: {
Chart,
},
data() {
return {
total: 100,
form: {
pageNum: 1,
pageSize: 10
},
option: [
{
value: '11',
label: '日'
},
{
value: '22',
label: '月'
},
{
value: '33',
label: '年'
},
],
tableData: [
{
type: '1',
column1: 1,
},
{
type: '1',
column1: 1,
},
{
type: '1',
column1: 1,
},
{
type: '1',
column1: 1,
},
{
type: '1',
column1: 1,
},
],
tableHead: [
{
label: '第1周',
value: 'column1',
},
{
label: '第2周',
value: 'column1',
},
{
label: '第3周',
value: 'column1',
},
{
label: '第4周',
value: 'column1',
},
{
label: '第5周',
value: 'column1',
},
{
label: '第6周',
value: 'column1',
},
]
}
}
,
mounted() {
this.$refs.chart1.setData({
tooltip: {
trigger: "axis",
},
legend: {},
grid: {
top: "middle",
left: "3%",
right: "4%",
bottom: "3%",
height: "80%",
containLabel: true,
},
xAxis: {
type: "category",
data: [100, 200, 20, 30, 60, 89],
axisLine: {
lineStyle: {
color: "#999",
},
},
},
yAxis: {
type: "value",
axisLabel: {
formatter: '{value}%'
},
splitLine: {
lineStyle: {
type: "dashed",
color: "#DDD",
},
},
axisLine: {
show: false,
lineStyle: {
color: "#333",
},
},
nameTextStyle: {
color: "#999",
},
splitArea: {
show: false,
},
},
series: [
{
name: "冰箱A线",
type: "line",
data: [800, 900, 220, 130, 660, 289],
color: "#F58080",
lineStyle: {
normal: {
width: 2,
color: {
type: "linear",
colorStops: [
{
offset: 0,
color: "#FFCAD4", // 0%
},
{
offset: 0.4,
color: "#F58080", // 100%
},
{
offset: 1,
color: "#F58080", // 100%
},
],
globalCoord: false, // false
},
},
},
itemStyle: {
normal: {
color: "#F58080",
borderWidth: 10,
/*shadowColor: 'rgba(72,216,191, 0.3)',
shadowBlur: 100,*/
borderColor: "#F58080",
},
},
smooth: true,
},
{
name: "冰箱B线",
type: "line",
data: [123, 568, 111, 222, 123, 56],
lineStyle: {
normal: {
width: 2,
color: {
type: "linear",
colorStops: [
{
offset: 0,
color: "#AAF487", // 0%
},
{
offset: 0.4,
color: "#47D8BE", // 100%
},
{
offset: 1,
color: "#47D8BE", // 100%
},
],
globalCoord: false, // false
},
shadowColor: "rgba(71,216,190, 0.5)",
shadowBlur: 10,
shadowOffsetY: 7,
},
},
itemStyle: {
normal: {
color: "#AAF487",
borderWidth: 10,
/*shadowColor: 'rgba(72,216,191, 0.3)',
shadowBlur: 100,*/
borderColor: "#AAF487",
},
},
smooth: true,
},
],
})
}
,
methods: {
getList() {
console.log(this.form)
}
,
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>
<style lang="less" scoped>
/deep/ .el-table .cell {
text-align: center !important;
}
</style>
Loading…
Cancel
Save