修改报表
夜笙歌
7 months ago
parent
d31477507e
commit
bb74f154b6
@ -1,26 +1,282 @@
|
||||
<template>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { findProductLineList } from '@//api/base/productLine'
|
||||
import { parseTime } from '@//utils/ruoyi'
|
||||
import {
|
||||
boxTraceabilityDetailReport,
|
||||
boxTraceabilityReport,
|
||||
} from '@//api/report/reportAPI'
|
||||
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",
|
||||
},
|
||||
},
|
||||
created() {
|
||||
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…
Reference in New Issue