修改报表
夜笙歌
7 months ago
parent
d31477507e
commit
bb74f154b6
@ -1,26 +1,282 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="app-container">
|
<div class="app-container">
|
||||||
2
|
<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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { findProductLineList } from '@//api/base/productLine'
|
import Chart from "@/components/board/Chart";
|
||||||
import { parseTime } from '@//utils/ruoyi'
|
|
||||||
import {
|
|
||||||
boxTraceabilityDetailReport,
|
|
||||||
boxTraceabilityReport,
|
|
||||||
} from '@//api/report/reportAPI'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'ProductOffLine',
|
name: 'ProductOffLine',
|
||||||
|
components: {
|
||||||
|
Chart,
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
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',
|
||||||
|
},
|
||||||
|
]
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
created() {
|
,
|
||||||
},
|
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: {
|
methods: {
|
||||||
|
getList() {
|
||||||
|
console.log(this.form)
|
||||||
|
}
|
||||||
|
,
|
||||||
|
resetForm(formName) {
|
||||||
|
this.$refs[formName].resetFields();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
/deep/ .el-table .cell {
|
||||||
|
text-align: center !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue