Jcdm041-Mes.git

wujian

5 天以前 ea3c33c8561df39d4f123d1424fda99dd0f0c51d

提交 \| 用户 \| 时间
9906e6	1	<template>
W	2	<div class="app-container">
	3	<el-card class="box-card">
	4	<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="90px">
	5	<el-form-item label="日期范围" prop="dateConditions">
	6	<el-date-picker
	7	v-model="queryParams.dateConditions"
	8	type="daterange"
	9	align="right"
	10	unlink-panels
	11	range-separator="至"
	12	start-placeholder="开始日期"
	13	end-placeholder="结束日期"
	14	value-format="yyyy-MM-dd"
	15	@change="handleDateChange">
	16	</el-date-picker>
	17	</el-form-item>
	18	<el-form-item label="工位编号" prop="locationCode">
	19	<el-select v-model="queryParams.locationCode" placeholder="请选择工位编号" clearable>
	20	<el-option
	21	v-for="item in locationOption"
	22	:key="item.value"
	23	:label="item.label"
	24	:value="item.value"
	25	/>
	26	</el-select>
	27	</el-form-item>
	28	<el-form-item label="数据类型" prop="paramName">
	29	<el-select v-model="queryParams.paramName" @change="getSelectOptionMethod" placeholder="请选择数据类型" clearable>
	30	<el-option
	31	v-for="item in dataTypeList"
	32	:key="item.value"
	33	:label="item.label"
	34	:value="item.value"
	35	/>
	36	</el-select>
	37	</el-form-item>
	38	<el-form-item label="螺栓名称" prop="paramCode">
	39	<el-select v-model="queryParams.paramCode" placeholder="请选择螺栓名称" clearable>
	40	<el-option
	41	v-for="item in screwNameList"
	42	:key="item.value"
	43	:label="item.label"
	44	:value="item.value"
	45	/>
	46	</el-select>
	47	</el-form-item>
	48
	49
	50	<el-form-item style="float: right">
	51	<el-button type="primary" icon="el-icon-search" size="mini" @click="queryChartMethod">搜索</el-button>
	52	<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
	53	</el-form-item>
	54	</el-form>
	55	</el-card>
	56	<el-card style="margin-top: 10px" class="box-card">
	57	<el-row :gutter="10" class="mb8">
	58	<el-tabs v-model="activeName" @tab-click="handleClick">
ea3c33	59	<el-tab-pane label="正态分布" name="first">
W	60	<div>
	61	<!-- <v-chart :option="chartOption" :style="{width: '600px', height: '400px'}"/>-->
	62	<div ref="chart1" :style="{ width: '900px', height: '400px' }"></div>
	63	</div>
	64	</el-tab-pane>
	65	<el-tab-pane label="散列图" name="second">
	66	<div ref="chart2" :style="{ width: '900px', height: '400px' }"></div>
	67	</el-tab-pane>
9906e6	68	</el-tabs>
W	69	</el-row>
ea3c33	70	<!-- <div>-->
W	71	<!--<!– <v-chart :option="chartOption" :style="{width: '600px', height: '400px'}"/>–>-->
	72	<!-- <div ref="chart" :style="{ width: '100%', height: '400px' }"></div>-->
	73	<!-- </div>-->
	74	<!-- <el-table v-loading="loading" border :data="paramCollectionList" @selection-change="handleSelectionChange" v-if="paramCollectionList.length > 0">-->
9906e6	75
ea3c33	76	<!-- </el-table>-->
9906e6	77
ea3c33	78	<!-- <el-empty v-else>-->
W	79	<!-- <span slot="description">暂无数据</span>-->
	80	<!-- </el-empty>-->
9906e6	81	</el-card>
W	82
	83
	84	</div>
	85	</template>
	86
	87	<script>
ea3c33	88	import {
W	89	addParamCollection,
	90	delParamCollection,
	91	getParamCollection,
	92	updateParamCollection
	93	} from "@/api/main/da/paramCollection/paramCollection";
	94	import {
	95	getSelectOption,
	96	queryChart,
	97	queryDaParamCollectionListForSearch
	98	} from "../../../../api/main/da/paramCollection/paramCollection";
	99	import VueECharts from 'vue-echarts';
	100	import echarts from 'echarts'
	101	import async from "async";
9906e6	102
W	103	export default {
	104	name: "ParamCollection",
ea3c33	105	components: {
W	106	'v-chart': VueECharts
	107	},
9906e6	108	data() {
W	109	return {
ea3c33	110	convertedData:[],
W	111	convertedData2:[],
9906e6	112	activeName: 'second',
W	113	dataTypeList:[
	114	{
	115	value: "扭矩",
	116	label: "扭矩"
	117	},
	118	{
	119	value: "角度",
	120	label: "角度"
	121	},
	122	],
	123	locationOption:[],
	124	screwNameList:[],
	125	maxDate: '',
	126	// 遮罩层
	127	loading: true,
	128	// 选中数组
	129	ids: [],
	130	// 非单个禁用
	131	single: true,
	132	// 非多个禁用
	133	multiple: true,
	134	// 显示搜索条件
	135	showSearch: true,
	136	// 总条数
	137	total: 0,
	138	// 设备产品过程参数采集表格数据
	139	paramCollectionList: [],
	140	// 弹出层标题
	141	title: "",
	142	// 是否显示弹出层
	143	open: false,
	144	// 查询参数
	145	queryParams: {
	146	dateConditions: [],
	147	pageNum: 1,
	148	pageSize: 10,
	149	workOrderNo: null,
	150	sfcCode: null,
	151	productCode: null,
	152	productionLine: null,
	153	locationCode: null,
	154	equipmentNo: null,
	155	paramCode: null,
	156	},
	157	// 表单参数
	158	form: {},
	159	// 表单校验
	160	rules: {
	161	id: [
	162	{ required: true, message: "主键id不能为空", trigger: "blur" }
	163	],
	164	// workOrderNo: [
	165	// { required: true, message: "工单编号不能为空", trigger: "blur" }
	166	// ],
	167	sfcCode: [
	168	{ required: true, message: "总成序列号不能为空", trigger: "blur" }
	169	],
	170	productCode: [
	171	{ required: true, message: "产品编号不能为空", trigger: "blur" }
	172	],
	173	// productionLine: [
	174	// { required: true, message: "产线编号不能为空", trigger: "blur" }
	175	// ],
	176	locationCode: [
	177	{ required: true, message: "工位编号不能为空", trigger: "blur" }
	178	],
	179	paramCode: [
	180	{ required: true, message: "参数编码不能为空", trigger: "blur" }
	181	],
	182	paramValue: [
	183	{ required: true, message: "参数值不能为空", trigger: "blur" }
	184	],
ea3c33	185	},
9906e6	186	};
W	187	},
	188	created() {
	189	// this.getList();
	190	},
	191	mounted() {
ea3c33	192	this.initChart1();
W	193	this.initChart2();
9906e6	194	this.getSelectOptionMethod()
W	195	},
	196	methods: {
ea3c33	197	initChart1() {
W	198	// 基于准备好的dom，初始化echarts实例
	199	const chart = echarts.init(this.$refs.chart1);
	200
	201	// 指定图表的配置项和数据
	202	const option = {
	203	title: {
	204	text: '正态分布图',
	205	},
	206	tooltip: {},
	207	xAxis: {
	208	type: 'value',
	209	scale: true
	210	},
	211	yAxis: {
	212	type: 'value',
	213	},
	214	series: [
	215	{
	216	name: '正态分布',
	217	type: 'line',
	218	smooth: true,
	219	// data: this.generateNormalDistributionData(10,0,1), // 均值0，标准差1的正态分布数据
	220	// data: this.queryChartMethod(), // 均值0，标准差1的正态分布数据
	221	data: this.convertedData, // 均值0，标准差1的正态分布数据
	222	},
	223	],
	224	};
	225
	226	// 使用刚指定的配置项和数据显示图表。
	227	chart.setOption(option);
	228	},
	229	initChart2() {
	230	// 基于准备好的dom，初始化echarts实例
	231	const chart = echarts.init(this.$refs.chart2);
	232
	233	// 指定图表的配置项和数据
	234	const option = {
	235	title: {
	236	text: '散列图',
	237	},
	238	tooltip: {},
	239	xAxis: {
	240	type: 'category',
	241	data:[]
	242	},
	243	yAxis: {
	244	type: 'value',
	245	scale: true
	246	},
	247	series: [
	248	{
	249	name: '散列图',
	250	type: 'scatter',
	251	data: this.convertedData2, // 均值0，标准差1的正态分布数据
	252	},
	253	],
	254	};
	255
	256	// 使用刚指定的配置项和数据显示图表。
	257	chart.setOption(option);
	258	},
	259	generateNormalDistributionData(numPoints, mean, stdDev) {
	260	let data = [];
	261	for (let i = 0; i < numPoints; i++) {
	262	const x = (i - numPoints / 2) / (numPoints / 4); // 缩放到合适的X范围
	263	const y = (1 / (stdDev * Math.sqrt(2 * Math.PI))) * Math.exp(-0.5 * Math.pow((x - mean) / stdDev, 2));
	264	data.push([x, y]);
	265	}
	266	console.log('rrered1111111111ata',data)
	267	data = this.chartData
	268	return data;
	269	},
9906e6	270	getSelectOptionMethod(){
W	271	getSelectOption(this.queryParams).then(res => {
	272	console.log('rrrrrrr',res)
	273	if (res.code === 200){
	274	this.locationOption = res.data.locationList
	275	this.screwNameList = res.data.paramCodeList
	276	}
	277	})
	278	},
ea3c33	279	async queryChartMethod(){
W	280	//计算方式可以百度
	281	let convertedData = []
	282	await queryChart(this.queryParams).then(res => {
9906e6	283	if (res.code === 200){
W	284	console.log('res',res)
	285	let dataArray = []
	286	if (res.data.length > 0){
	287	res.data.forEach(x => {
ea3c33	288	let num = parseFloat(x)
9906e6	289	dataArray.push(num)
W	290	})
	291	}
	292	console.log('res222',dataArray)
ea3c33	293	this.convertedData2 = dataArray
9906e6	294	let array=dataArray
W	295	console.log('arra',array)
	296	// 平均值
	297	let mean=(array.reduce((a,b)=>a+b))/array.length
ea3c33	298	mean = mean.toFixed(2)
9906e6	299	console.log('mean',mean)
W	300	// 方差
	301	let variance=array.map(x=>{
	302	return Math.pow(x-mean,2)
	303	}).reduce((a,b)=>a+b)/array.length
ea3c33	304	console.log('variance222',variance)
9906e6	305	// 标准差
W	306	let StandardDeviation = Math.sqrt(variance)
ea3c33	307	StandardDeviation = StandardDeviation.toFixed(2)
9906e6	308	console.log('StandardDeviation',StandardDeviation)
ea3c33	309	console.log('mean-3StandardDeviation',mean - 3StandardDeviation)
W	310	console.log('mean+3StandardDeviation',parseFloat(mean) + 3StandardDeviation)
	311	let step = 0.1
	312
	313	for(let x=mean-3StandardDeviation; x<=parseFloat(mean) + 3StandardDeviation; x = parseFloat((x+step).toFixed(2))){
	314	console.log('x',x)
9906e6	315	//for循环中的条件代表你要生成几个标准差的数据，
W	316	// 再带入正态分布公式，就可以生成一条整条分布曲线的数据
ea3c33	317	console.log('(StandardDeviationMath.sqrt(2(Math.PI)))',(StandardDeviationMath.sqrt(2(Math.PI))))
W	318	console.log('1/(StandardDeviationMath.sqrt(2(Math.PI)))',1/(StandardDeviationMath.sqrt(2(Math.PI))))
	319	console.log('-(Math.pow(x-mean,2))',-(Math.pow(x-mean,2)))
	320	console.log('(2(Math.pow(parseFloat(StandardDeviation),2)))',(2(Math.pow(parseFloat(StandardDeviation),2))))
	321	const temp =1/(StandardDeviationMath.sqrt(2(Math.PI)))Math.exp(-(Math.pow(x-mean,2))/(2(Math.pow(parseFloat(StandardDeviation),2))))
	322	console.log('temp',temp)
	323	let y = parseFloat(temp.toFixed(2))
	324	console.log('yyyyyyyyyyy',y)
	325	let a = []
	326	a = [x,y]
	327	console.log('a',a)
	328	convertedData.push(a)
9906e6	329	}
W	330	}
	331	})
ea3c33	332	console.log('34535435345',convertedData)
W	333	this.convertedData = convertedData
	334	this.initChart1()
	335	this.initChart2()
9906e6	336	},
W	337	handleClick(tab, event) {
	338	console.log(tab, event);
	339	},
	340	handleDateChange(value) {
	341	if (value && value.length === 2) {
	342	const startDate = value[0];
	343	const endDate = value[1];
	344	const dayCount = this.daysBetween(startDate, endDate);
ea3c33	345	if (dayCount + 1 > 2) {
W	346	this.$message.error('请选择连续的2天！');
9906e6	347	this.queryParams.dateConditions = []; // 重置日期范围
W	348	}
	349	}
	350	},
	351	daysBetween(startDate, endDate) {
	352	const oneDay = 24 * 60 * 60 * 1000; // 每天的毫秒数
	353	const startTime = new Date(startDate).getTime();
	354	const endTime = new Date(endDate).getTime();
	355	return Math.round(Math.abs((startTime - endTime) / oneDay));
	356	},
	357	/** 查询设备产品过程参数采集列表 */
	358	getList() {
	359	this.loading = true;
	360	if ((this.queryParams.sfcCode == null \|\| this.queryParams.sfcCode === '') && this.queryParams.dateConditions.length === 0){
	361	this.$message({
	362	message: '请输入发动机号码或者选择查询日期',
	363	type: 'info'
	364	});
	365	} else {
	366	queryDaParamCollectionListForSearch(this.queryParams).then(response => {
	367	this.paramCollectionList = response.rows;
	368	this.total = response.total;
	369	this.loading = false;
	370	});
	371	}
	372
	373	},
	374	// 取消按钮
	375	cancel() {
	376	this.open = false;
	377	this.reset();
	378	},
	379	// 表单重置
	380	reset() {
	381	this.form = {
	382	id: null,
	383	workOrderNo: null,
	384	sfcCode: null,
	385	productCode: null,
	386	productionLine: null,
	387	locationCode: null,
	388	equipmentNo: null,
	389	paramCode: null,
	390	paramValue: null,
	391	paramUpper: null,
	392	paramLower: null,
	393	paramStandard: null,
	394	collectionTime: null,
	395	spareField1: null,
	396	spareField2: null,
	397	createUser: null,
	398	createTime: null,
	399	updateUser: null,
	400	updateTime: null,
	401	state: null,
	402	paramName: null,
	403	unit: null,
	404	type: null
	405	};
	406	this.resetForm("form");
	407	},
	408	/** 搜索按钮操作 */
	409	handleQuery() {
	410	this.queryParams.pageNum = 1;
	411	this.getList();
	412	},
	413	/** 重置按钮操作 */
	414	resetQuery() {
	415	this.resetForm("queryForm");
	416	this.handleQuery();
	417	},
	418	// 多选框选中数据
	419	handleSelectionChange(selection) {
	420	this.ids = selection.map(item => item.id)
	421	this.single = selection.length!==1
	422	this.multiple = !selection.length
	423	},
	424	/** 新增按钮操作 */
	425	handleAdd() {
	426	this.reset();
	427	this.open = true;
	428	this.title = "添加设备产品过程参数采集";
	429	},
	430	/** 修改按钮操作 */
	431	handleUpdate(row) {
	432	this.reset();
	433	const id = row.id \|\| this.ids
	434	getParamCollection(id).then(response => {
	435	this.form = response.data;
	436	this.open = true;
	437	this.title = "修改设备产品过程参数采集";
	438	});
	439	},
	440	/** 提交按钮 */
	441	submitForm() {
	442	this.$refs["form"].validate(valid => {
	443	if (valid) {
	444	if (this.form.id != null) {
	445	updateParamCollection(this.form).then(response => {
	446	this.$modal.msgSuccess("修改成功");
	447	this.open = false;
	448	this.getList();
	449	});
	450	} else {
	451	addParamCollection(this.form).then(response => {
	452	this.$modal.msgSuccess("新增成功");
	453	this.open = false;
	454	this.getList();
	455	});
	456	}
	457	}
	458	});
	459	},
	460	/** 删除按钮操作 */
	461	handleDelete(row) {
	462	const ids = row.id \|\| this.ids;
	463	this.$modal.confirm('是否确认删除设备产品过程参数采集编号为"' + ids + '"的数据项？').then(function() {
	464	return delParamCollection(ids);
	465	}).then(() => {
	466	this.getList();
	467	this.$modal.msgSuccess("删除成功");
	468	}).catch(() => {});
	469	},
	470	/** 导出按钮操作 */
	471	handleExport() {
	472	this.download('main/paramCollection/export', {
	473	...this.queryParams
	474	}, `paramCollection_${new Date().getTime()}.xlsx`)
	475	}
	476	}
	477	};
	478	</script>