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="monthrange"
					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="产品">
				<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.componentName }}
						</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" v-model="queryParams.materialCode" placeholder="点击选择产品"/>
						<el-input type="input" v-model="queryParams.materialName" 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>
			<!--产品物料选择弹窗-->
			<ItemSelectMaterial
				ref="itemSelectMaterial"
				@onSelected="onSelectMaterial"
			></ItemSelectMaterial>
  </div>
</template>

<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons')
import {getProduceChartData,getWorkcenterList} from "@/api/quality/qcTable";
import ItemSelectMaterial from "./selectMaterial.vue";
import moment from 'moment';
export default {
  name: "produceLineChart",
  components: { ItemSelectMaterial},
  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,
			materialCode: '',
			materialName: ''
		},
		options:null,
		// 产品选中listtag
		selectMaterielListtag:[],
	}
  },
	mounted(){
		this.getDate();
		this.getList()
		this.getWorkcenterList();
	},

	methods: {
		getWorkcenterList(){
			
            getWorkcenterList().then(data => {
				this.options = data;
			});
			this.queryParams.workCenter = this.options[0].factoryCode;
		},
	    /**获取默认查询时间段**/
		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
			)
			})
		},
        /**供应商选择弹出框**/
		handleSelectSupplier() {
		  this.$refs.itemSelectMaterial.showFlag = true;
		},
		//供应商选择确认
		onSelectMaterial(objs) {
			var code = '';
			var desc = '';
			for (let i = 0; i < objs.length; i++) {
				if(this.queryParams.materialCode.indexOf(objs[i].component)<0){
					code = code + objs[i].component + ',';
					this.selectMaterielListtag.push(objs[i])
				}else{
					this.$message({
						message: objs[i].componentName+'已经选择',
						type: 'warning'
					})
				}

				if(this.queryParams.materialName.indexOf(objs[i].componentName)<0){
				  desc = desc + objs[i].componentName + ',';
				}
			}

			this.queryParams.materialCode += code;
			this.queryParams.materialName += desc;
		},
		// 新增—删除标签
		handleClose(tag) {
	
			this.selectMaterielListtag.splice(this.selectMaterielListtag.indexOf(tag.componentName), 1);
			var code = "";
			var desc = "";
			for (let i = 0; i < this.selectMaterielListtag.length; i++) {
				code = code + this.selectMaterielListtag[i].component + ",";
				desc = desc + this.selectMaterielListtag[i].componentName + ",";
			}
			this.queryParams.materialCode = code;
			this.queryParams.materialName = desc;
		}
	}
};
</script>
<style lang="scss" scoped>
.tagbox {
  display: flex;
  /* overflow: scroll; */
  position: relative;
  width: 80%;
  padding-left: 26px;
  margin-bottom: 15px;
  .tagboxlabel{
    width: 100px;
    text-align: right;
    vertical-align: middle;
    font-size: 14px;
    color: black;
    line-height: 40px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-right: 12px;
  }
  .tag {
    width: 720px;
    border: 1px #DCDFE6 solid;
    height: 60px;
    padding: 5px 15px;
    overflow-y: scroll;
    .tagitem{
      margin-left: 5px;
    }
  }
  .button1{
    width: 37px;
    height: 37px;
    position: absolute;
        right: -39px;
    top: 2px;

  }
}
</style>