test #47
@@ -17,11 +17,12 @@ import * as echarts from 'echarts';
 | 
			
		||||
export default {
 | 
			
		||||
	name: 'LineChartInEquipmentProcessAmount',
 | 
			
		||||
	components: {},
 | 
			
		||||
	props: ['equipmentList'],
 | 
			
		||||
	props: ['equipmentList', 'render'],
 | 
			
		||||
	data() {
 | 
			
		||||
		return {
 | 
			
		||||
			chart: null,
 | 
			
		||||
			option: {
 | 
			
		||||
				color: ['#288AFF'],
 | 
			
		||||
				grid: {
 | 
			
		||||
					top: 64,
 | 
			
		||||
					left: 56,
 | 
			
		||||
@@ -89,16 +90,19 @@ export default {
 | 
			
		||||
			},
 | 
			
		||||
		};
 | 
			
		||||
	},
 | 
			
		||||
	mounted() {
 | 
			
		||||
		// console.log('this.eq list', this.equipmentList);
 | 
			
		||||
		if (!this.chart) this.chart = echarts.init(this.$refs.chart);
 | 
			
		||||
 | 
			
		||||
		this.$nextTick(() => {
 | 
			
		||||
			this.chart.setOption(this.updateConfig(this.option));
 | 
			
		||||
		});
 | 
			
		||||
	watch: {
 | 
			
		||||
		render: {
 | 
			
		||||
			handler: function (newVal, oldVal) {
 | 
			
		||||
				if (!this.chart) this.chart = echarts.init(this.$refs.chart);
 | 
			
		||||
				this.$nextTick(() => {
 | 
			
		||||
					if (this.chart) this.chart.setOption(this.updateConfig(this.option));
 | 
			
		||||
				});
 | 
			
		||||
			},
 | 
			
		||||
			deep: true,
 | 
			
		||||
		},
 | 
			
		||||
	},
 | 
			
		||||
	beforeDestroy() {
 | 
			
		||||
		this.chart.dispose();
 | 
			
		||||
		if (this.chart) this.chart.dispose();
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
		updateConfig(config) {
 | 
			
		||||
@@ -126,5 +130,6 @@ export default {
 | 
			
		||||
.chart {
 | 
			
		||||
	height: 100%;
 | 
			
		||||
	width: 100%;
 | 
			
		||||
	// background: lightcoral;
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
 
 | 
			
		||||
@@ -89,9 +89,12 @@
 | 
			
		||||
							<el-tab-pane :label="'\u3000柱状图\u3000'" name="graph">
 | 
			
		||||
								<div class="graph" style="height: 56vh">
 | 
			
		||||
									<!-- graph  -->
 | 
			
		||||
									<Graph v-if="list.length" :equipment-list="list" />
 | 
			
		||||
									<Graph
 | 
			
		||||
										v-if="list.length"
 | 
			
		||||
										:equipment-list="list"
 | 
			
		||||
										:render="renderKey" />
 | 
			
		||||
									<div
 | 
			
		||||
										v-else
 | 
			
		||||
										v-if="list.length == 0"
 | 
			
		||||
										style="
 | 
			
		||||
											color: #c7c7c7;
 | 
			
		||||
											text-align: center;
 | 
			
		||||
@@ -120,6 +123,7 @@ export default {
 | 
			
		||||
	props: {},
 | 
			
		||||
	data() {
 | 
			
		||||
		return {
 | 
			
		||||
			renderKey: Math.random(),
 | 
			
		||||
			factoryListOpen: false,
 | 
			
		||||
			currentFactory: null,
 | 
			
		||||
			factoryList: [
 | 
			
		||||
@@ -327,13 +331,12 @@ export default {
 | 
			
		||||
		},
 | 
			
		||||
 | 
			
		||||
		handleTabClick(tab, event) {
 | 
			
		||||
			console.log('handle tab click: ', tab, event);
 | 
			
		||||
			if (tab.name == 'graph') this.renderKey = Math.random();
 | 
			
		||||
		},
 | 
			
		||||
 | 
			
		||||
		factoryChangeHandler(event) {
 | 
			
		||||
			this.factoryListOpen = false;
 | 
			
		||||
			const fcId = event.target.dataset.value;
 | 
			
		||||
			console.log('fc id', fcId);
 | 
			
		||||
			this.handleSidebarItemClick({ id: fcId, type: '工厂' });
 | 
			
		||||
			this.currentFactory = this.sidebarContent.find((item) => item.id == fcId);
 | 
			
		||||
		},
 | 
			
		||||
@@ -398,7 +401,7 @@ export default {
 | 
			
		||||
	padding: 0;
 | 
			
		||||
	color: #111;
 | 
			
		||||
	/* background: #f2f4f7; */
 | 
			
		||||
	background: #E3EFFF !important;
 | 
			
		||||
	background: #e3efff !important;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.vvv-enter,
 | 
			
		||||
@@ -527,14 +530,17 @@ li {
 | 
			
		||||
	padding: 8px 12px !important;
 | 
			
		||||
}
 | 
			
		||||
.custom-tree-class >>> .el-tree-node__content:hover {
 | 
			
		||||
	background: #E3EFFF;
 | 
			
		||||
	background: #e3efff;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.custom-tree-class >>> .el-tree-node__children .el-tree-node__content {
 | 
			
		||||
	padding: 8px 18px !important;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.custom-tree-class >>> .el-tree-node__children .el-tree-node__children .el-tree-node__content {
 | 
			
		||||
.custom-tree-class
 | 
			
		||||
	>>> .el-tree-node__children
 | 
			
		||||
	.el-tree-node__children
 | 
			
		||||
	.el-tree-node__content {
 | 
			
		||||
	padding: 8px 24px !important;
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
 
 | 
			
		||||
@@ -54,6 +54,7 @@
 | 
			
		||||
					label="按钮盒识别码"
 | 
			
		||||
					prop="buttonId"
 | 
			
		||||
					:rules="[
 | 
			
		||||
						{ required: true, message: '不能为空', trigger: 'blur' },
 | 
			
		||||
						{
 | 
			
		||||
							type: 'number',
 | 
			
		||||
							message: '请输入整数',
 | 
			
		||||
@@ -98,12 +99,16 @@
 | 
			
		||||
					label="按钮值"
 | 
			
		||||
					prop="keyValue"
 | 
			
		||||
					:rules="[
 | 
			
		||||
						{ required: true, message: '不能为空', trigger: 'blur' },
 | 
			
		||||
						{
 | 
			
		||||
							type: 'number',
 | 
			
		||||
							message: '请输入100以内的整数',
 | 
			
		||||
							trigger: 'blur',
 | 
			
		||||
							transform: (val) =>
 | 
			
		||||
								Number(val) <= 100 && Number.isInteger(+val) && Number(val),
 | 
			
		||||
								Number.isInteger(+val) &&
 | 
			
		||||
								Number(val) >= 0 &&
 | 
			
		||||
								Number(val) <= 100 &&
 | 
			
		||||
								Number(val),
 | 
			
		||||
						},
 | 
			
		||||
					]">
 | 
			
		||||
					<el-input
 | 
			
		||||
@@ -165,10 +170,10 @@ export default {
 | 
			
		||||
	watch: {
 | 
			
		||||
		'dataForm.productionId': {
 | 
			
		||||
			handler(id) {
 | 
			
		||||
				this.getWorksectionList(id);
 | 
			
		||||
				if (id != null) this.getWorksectionList(id);
 | 
			
		||||
			},
 | 
			
		||||
			immediate: true
 | 
			
		||||
		}
 | 
			
		||||
			immediate: true,
 | 
			
		||||
		},
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
		/** 模拟透传 ref  */
 | 
			
		||||
 
 | 
			
		||||
@@ -236,7 +236,8 @@ export default {
 | 
			
		||||
					// width: 160,
 | 
			
		||||
					prop: 'checkTime',
 | 
			
		||||
					label: '检测时间',
 | 
			
		||||
					filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
 | 
			
		||||
					filter: (val) =>
 | 
			
		||||
						val != null ? moment(val).format('yyyy-MM-DD HH:mm:ss') : '-',
 | 
			
		||||
				},
 | 
			
		||||
				{
 | 
			
		||||
					width: 90,
 | 
			
		||||
 
 | 
			
		||||
@@ -332,33 +332,51 @@ export default {
 | 
			
		||||
	},
 | 
			
		||||
	mounted() {
 | 
			
		||||
		if (this.$route.params.startTime && this.$route.params.endTime) {
 | 
			
		||||
      this.searchBarFormConfig[0].defaultSelect = [this.$route.params.startTime, this.$route.params.endTime]
 | 
			
		||||
			this.searchBarFormConfig[0].defaultSelect = [
 | 
			
		||||
				this.$route.params.startTime,
 | 
			
		||||
				this.$route.params.endTime,
 | 
			
		||||
			];
 | 
			
		||||
			this.queryParams.param = {};
 | 
			
		||||
			this.$set(this.queryParams.param, 'startTime', this.$route.params.startTime);
 | 
			
		||||
			this.$set(
 | 
			
		||||
				this.queryParams.param,
 | 
			
		||||
				'startTime',
 | 
			
		||||
				this.$route.params.startTime
 | 
			
		||||
			);
 | 
			
		||||
			this.$set(this.queryParams.param, 'endTime', this.$route.params.endTime);
 | 
			
		||||
    } else {
 | 
			
		||||
      this.searchBarFormConfig[0].defaultSelect = []
 | 
			
		||||
    }
 | 
			
		||||
		} else {
 | 
			
		||||
			this.searchBarFormConfig[0].defaultSelect = [];
 | 
			
		||||
		}
 | 
			
		||||
		this.getList();
 | 
			
		||||
	},
 | 
			
		||||
	watch: {
 | 
			
		||||
    $route: 'initData'
 | 
			
		||||
  },
 | 
			
		||||
		$route: 'initData',
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
		initData(to) {
 | 
			
		||||
			// console.log(to)
 | 
			
		||||
      if (to.name === 'QualityStatistics') {
 | 
			
		||||
        if (this.$route.params.startTime && this.$route.params.endTime) {
 | 
			
		||||
					this.searchBarFormConfig[0].defaultSelect = [this.$route.params.startTime, this.$route.params.endTime]
 | 
			
		||||
			if (to.name === 'QualityStatistics') {
 | 
			
		||||
				if (this.$route.params.startTime && this.$route.params.endTime) {
 | 
			
		||||
					this.searchBarFormConfig[0].defaultSelect = [
 | 
			
		||||
						this.$route.params.startTime,
 | 
			
		||||
						this.$route.params.endTime,
 | 
			
		||||
					];
 | 
			
		||||
					this.queryParams.param = {};
 | 
			
		||||
					this.$set(this.queryParams.param, 'startTime', this.$route.params.startTime);
 | 
			
		||||
					this.$set(this.queryParams.param, 'endTime', this.$route.params.endTime);
 | 
			
		||||
					this.$set(
 | 
			
		||||
						this.queryParams.param,
 | 
			
		||||
						'startTime',
 | 
			
		||||
						this.$route.params.startTime
 | 
			
		||||
					);
 | 
			
		||||
					this.$set(
 | 
			
		||||
						this.queryParams.param,
 | 
			
		||||
						'endTime',
 | 
			
		||||
						this.$route.params.endTime
 | 
			
		||||
					);
 | 
			
		||||
				} else {
 | 
			
		||||
					this.searchBarFormConfig[0].defaultSelect = []
 | 
			
		||||
					this.searchBarFormConfig[0].defaultSelect = [];
 | 
			
		||||
				}
 | 
			
		||||
				this.getList();
 | 
			
		||||
			}
 | 
			
		||||
    },
 | 
			
		||||
		},
 | 
			
		||||
		getList() {
 | 
			
		||||
			this.getSummaryList();
 | 
			
		||||
			this.getDetailedList();
 | 
			
		||||
@@ -367,20 +385,17 @@ export default {
 | 
			
		||||
		async getSummaryList() {
 | 
			
		||||
			const response = await this.$axios({
 | 
			
		||||
				url: '/monitoring/statistical-data/getUpPart',
 | 
			
		||||
				method: 'get',
 | 
			
		||||
				params: this.queryParams.param
 | 
			
		||||
				method: 'post',
 | 
			
		||||
				data: this.queryParams.param
 | 
			
		||||
					? {
 | 
			
		||||
							param: {
 | 
			
		||||
								// startTime: new Date(2022, 6, 1, 0, 0, 0).getTime(), //  '2023-07-01 00:00:00',
 | 
			
		||||
								// endTime: new Date(2023, 7, 10, 0, 0, 0).getTime(), // '2023-08-10 00:00:00',
 | 
			
		||||
								startTime: this.queryParams.param.startTime,
 | 
			
		||||
								endTime: this.queryParams.param.endTime,
 | 
			
		||||
							},
 | 
			
		||||
							// startTime: new Date(2022, 6, 1, 0, 0, 0).getTime(), //  '2023-07-01 00:00:00',
 | 
			
		||||
							// endTime: new Date(2023, 7, 10, 0, 0, 0).getTime(), // '2023-08-10 00:00:00',
 | 
			
		||||
							startTime: this.queryParams.param.startTime,
 | 
			
		||||
							endTime: this.queryParams.param.endTime,
 | 
			
		||||
					  }
 | 
			
		||||
					: null,
 | 
			
		||||
					: {},
 | 
			
		||||
			});
 | 
			
		||||
			this.summaryList = response.data;
 | 
			
		||||
			console.log('summaryList', this.summaryList);
 | 
			
		||||
		},
 | 
			
		||||
		/** 获取 检测内容和产线关联 列表 */
 | 
			
		||||
		async getDetailedList() {
 | 
			
		||||
@@ -388,22 +403,21 @@ export default {
 | 
			
		||||
				data: { data, otherList, otherMap, nameData },
 | 
			
		||||
			} = await this.$axios({
 | 
			
		||||
				url: '/monitoring/statistical-data/getDownPart',
 | 
			
		||||
				params: this.queryParams.param
 | 
			
		||||
				method: 'post',
 | 
			
		||||
				data: this.queryParams.param
 | 
			
		||||
					? {
 | 
			
		||||
							param: {
 | 
			
		||||
								// startTime: new Date(2023, 6, 1).getTime(), // '2023-07-01 00:00:00',
 | 
			
		||||
								// endTime: new Date(2023, 7, 22).getTime(), // '2023-08-10 00:00:00',
 | 
			
		||||
								startTime: this.queryParams.param.startTime,
 | 
			
		||||
								endTime: this.queryParams.param.endTime,
 | 
			
		||||
							},
 | 
			
		||||
							// startTime: new Date(2023, 6, 1).getTime(), // '2023-07-01 00:00:00',
 | 
			
		||||
							// endTime: new Date(2023, 7, 22).getTime(), // '2023-08-10 00:00:00',
 | 
			
		||||
							startTime: this.queryParams.param.startTime,
 | 
			
		||||
							endTime: this.queryParams.param.endTime,
 | 
			
		||||
					  }
 | 
			
		||||
					: null,
 | 
			
		||||
					: {},
 | 
			
		||||
			});
 | 
			
		||||
			// this.list = response.data;
 | 
			
		||||
			console.log('data', data);
 | 
			
		||||
			console.log('otherList', otherList);
 | 
			
		||||
			console.log('otherMap', otherMap);
 | 
			
		||||
			console.log('nameData', nameData);
 | 
			
		||||
			// console.log('data', data);
 | 
			
		||||
			// console.log('otherList', otherList);
 | 
			
		||||
			// console.log('otherMap', otherMap);
 | 
			
		||||
			// console.log('nameData', nameData);
 | 
			
		||||
 | 
			
		||||
			this.dynamicProps = this.filterNameData(nameData);
 | 
			
		||||
			this.list = this.filterData(data);
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user