lanju-front/src/views/quality/qcTableProduce/index.vue

<template>
    <div class="app-container">
		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px" style="margin-bottom: 0px;">
			<el-form-item label="月份" prop="ymArray">
                <el-date-picker
					v-model="queryParams.ymArray"
					format="yyyy-MM"
					type="datetimerange"
					range-separator="至"
					start-placeholder="开始月份"
					end-placeholder="结束月份">
				</el-date-picker>
			</el-form-item>
			<el-form-item label="工作中心">
				 <el-select v-model="queryParams.workCenter" filterable placeholder="请选择工作中心">
					<el-option
					v-for="item in options"
					:key="item.factoryCode"
					:label="item.factoryName"
					:value="item.factoryCode">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="产品" prop="supplierCodeArray">
				<div class="tagbox">
					<div class="tag" style="" placeholder="请选择产品">
						<el-tag
						:key="index"
						class="tagitem"
						v-for="(tag, index) in selectMaterielListtag"
						closable
						:disable-transitions="false"
						@close="handleClose(tag)"
						>
						{{ tag.supplierName }}
						</el-tag>
					</div>
					<el-button
						slot="append"
						class="button1"
						@click="handleSelectSupplier"
						icon="el-icon-search"
					></el-button>
					<el-row style="display: none;">
						<el-input type="input" clearable v-model="queryParams.supplierCode" placeholder="点击选择物料"/>
						<el-input type="input"clearable v-model="queryParams.supplierName" placeholder="点击选择物料"/>
					</el-row>
				</div>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>
		<el-row :gutter="20">
			<el-col :sm="24" :lg="24">
				<span style="font-size: 20px;margin: 40%;color: cadetblue;">{{title}}</span>
			</el-col>
		</el-row>
		<el-row :gutter="20">
				<div style="border: 1px solid #cfdee4;">
				    <div id="orderline" style="width:100%;height:500px"></div>
				</div>
		</el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons')
import {getProduceChartData} from "@/api/quality/qcTable";
import moment from 'moment';
export default {
  name: "produceLineChart",
  data() {
    return {
        title:"不良率统计",
		// 查询参数
		queryParams: {
            ymArray: [],
			workorderId: null,
			rfid: null,
			factoryCode: null,
			machineCode: null,
			nowProcessId: null,
			nextProcessId: null,
			orderNum: null,
			inTime: null,
			outTime: null,
			status: null,
			shiftId: null,
			productCode: null,
			supplierName: '',
			supplierCode: ''
		}
	}
  },
	mounted(){
		this.getDate();
		this.getList()
	},

	methods: {
	    /**获取默认查询时间段**/
		getDate() {
			let start = this.Fungetdate (0)
			let end = this.Fungetdate (0)
			this.queryParams.ymArray.push(start,end)
		},
		Fungetdate (num) {
			var dd = new Date();
			dd.setDate(dd.getDate() + num);
			var y = dd.getFullYear();
			var m = dd.getMonth() + 1;//获取当前月份的日期
			var d = dd.getDate();
			return y + "-" + m;
		},	
		/** 搜索按钮操作 */
		handleQuery() {
			this.getList();
		},

		/** 重置按钮操作 */
		resetQuery() {
			this.resetForm("queryForm");
			this.getDate();
			this.handleQuery();
		},
		getList() {

			if(this.queryParams.ymArray.length>0){
				this.queryParams.ymArrayStart = moment(this.queryParams.ymArray[0]).format('YYYY-MM');
				this.queryParams.ymArrayEnd = moment(this.queryParams.ymArray[1]).format('YYYY-MM');
			}

			let myChart = this.$echarts.init(document.getElementById('orderline'))
			getProduceChartData(this.queryParams).then(data => {
				myChart.setOption({
					title: {
						text: this.title
					},
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data: data.legendData//['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					toolbox: {
						feature: {
							saveAsImage: {}
						}
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: data.xAxis//['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
					},
					yAxis: {
						type: 'value'
					},
					series: data.series
					//[
					//	{
					//	name: 'Email',
					//	type: 'line',
					////	stack: 'Total',
					//	data: [120, 132, 101, 134, 90, 230, 210]
					//	}
					//]
				},
				true
			)}
		)}
	}
};
</script>