update 产品质量分析

src/views/base/equipmentBindGroup/index.vue

@@ -303,7 +303,7 @@ export default {
 		handleDelete(row) {
 			const id = row.id;
 			this.$modal
-				.confirm('是否确认删除设备与分组绑定编号为"' + id + '"的数据项?')
+				.confirm('是否确认删除该分组绑定?')
 				.then(function () {
 					return deleteEquipmentBindGroup(id);
 				})

src/views/equipment/analysis/efficiency/index.vue

@@ -118,12 +118,12 @@ export default {
 						{
 							width: 128,
 							prop: 'workTime',
-							label: '工作时长',
+							label: '工作时长[h]',
 						},
 						{
 							width: 128,
 							prop: 'workRate',
-							label: '百分比',
+							label: '百分比[%]',
 							filter: (val) => (val != null ? +val.toFixed(3) : '-'),
 						},
 					],
@@ -134,9 +134,9 @@ export default {
 						{
 							width: 128,
 							prop: 'stopTime',
-							label: '停机时长',
+							label: '停机时长[h]',
 						},
-						{ width: 128, prop: 'stopRate', label: '百分比' },
+						{ width: 128, prop: 'stopRate', label: '百分比[%]' },
 					],
 				},
 				{
@@ -145,10 +145,10 @@ export default {
 						{
 							width: 128,
 							prop: 'downTime',
-							label: '故障时长',
+							label: '故障时长[h]',
 							filter: (val) => (val != null ? +val.toFixed(3) : '-'),
 						},
-						{ width: 128, prop: 'downRate', label: '百分比' },
+						{ width: 128, prop: 'downRate', label: '百分比[%]' },
 						{
 							width: 128,
 							prop: 'timeEfficiency',

src/views/equipment/analysis/exception/index.vue

@@ -155,7 +155,7 @@ export default {
 		async getList() {
 			this.loading = true;
 			// 执行查询
-			const { data } = await this.$axios({
+			const { code, data } = await this.$axios({
 				url: '/analysis/equipment-analysis/efficiency',
 				method: 'get',
 				params: {
@@ -163,6 +163,11 @@ export default {
 					recordTime: this.queryParams.recordTime || null,
 				},
 			});
+			if (code === 0) {
+				this.list = data;
+			} else {
+				this.list.splice(0);
+			}
 		},
 
 		handleSearchBarBtnClick(btn) {

src/views/equipment/analysis/quality/components/lineChart.vue

@@ -43,7 +43,7 @@ export default {
 					eq.okQuantity,
 					eq.nokQuantity,
 					eq.totalQuantity,
-					eq.passRate.toFixed(2),
+					eq.passRate.toFixed(4),
 				]);
 			});
 			return {
@@ -53,6 +53,30 @@ export default {
 					axisPointer: {
 						type: 'shadow',
 					},
+					formatter: (params) => {
+						const name = params[0].name;
+						const goodRate = opt.find((item) => item[0] == name)[4];
+						return `
+							<h1 style="font-size: 18px; letter-spacing: 1px;">${
+								params[0].axisValue
+							} <small>${goodRate}%</small></h1>
+							<ul style="margin: 0; padding: 0; min-width: 128px;">
+								${params
+									.map(
+										(item, index) => `
+											<li style="list-style: none; display: flex; justify-content: space-between; align-items: center;">
+												<div>
+													<span style="display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: ${item.color}; margin-right: 5px;"></span>
+													${item.seriesName}
+												</div>
+												${item.value}
+											</li>
+								`
+									)
+									.join('')}
+							</ul>
+						`;
+					},
 				},
 				legend: {
 					itemWidth: 12,
@@ -110,17 +134,17 @@ export default {
 						stack: 's',
 						data: opt.map((item) => item[2]),
 					},
-					{
-						name: '加工数量',
-						type: 'bar',
-						barWidth: 20,
-						data: opt.map((item) => item[3]),
-					},
-					{
-						name: '合格率',
-						type: 'line', 
-						data: opt.map((item) => item[4]),
-					},
+					// {
+					// 	name: '加工数量',
+					// 	type: 'bar',
+					// 	barWidth: 20,
+					// 	data: opt.map((item) => item[3]),
+					// },
+					// {
+					// 	name: '合格率',
+					// 	type: 'line',
+					// 	data: opt.map((item) => item[4]),
+					// },
 				],
 			};
 		},

src/views/equipment/analysis/quality/index.vue

@@ -31,7 +31,8 @@
 					<el-tab-pane :label="'\u3000柱状图\u3000'" name="graph">
 						<div v-if="activeName == 'graph'" class="graph" style="height: 40vh; display: flex; flex-direction: column;">
 							<div class="blue-title">各设备加工数量</div>
-							<LineChart :list="list" />
+							<LineChart v-if="list && list.length" :list="list" />
+							<div v-else class="no-data-bg"></div>
 						</div>
 					</el-tab-pane>
 				</el-tabs>

src/views/equipment/timing-diagram/output/index.vue

@@ -8,7 +8,7 @@
 <template>
 	<div
 		class="production-timegraph-container"
-		style="background: #f2f4f9; flex: 1">
+		style="background: #f2f4f9; flex: 1; display: flex; flex-direction: column">
 		<el-row
 			class=""
 			style="
@@ -24,12 +24,16 @@
 				:formConfigs="searchBarFormConfig"
 				ref="search-bar"
 				:remove-blue="true"
+				@select-changed="handleSearchBarChanged"
 				@headBtnClick="handleSearchBarBtnClick" />
 		</el-row>
 
 		<el-row
 			class=""
 			style="
+				flex: 1;
+				display: flex;
+				flex-direction: column;
 				margin-bottom: 12px;
 				background: #fff;
 				padding: 16px 16px 24px;
@@ -37,7 +41,7 @@
 			">
 			<div class="blue-title">设备产量时序图</div>
 
-			<div class="main-area">
+			<div class="main-area" style="flex: 1">
 				<div class="graphs" v-if="graphList.length">
 					<LineChart :config="templateConfig" />
 				</div>
@@ -70,6 +74,7 @@
 
 <script>
 import LineChart from './components/lineChart.vue';
+import response from './response.json';
 
 export default {
 	name: 'SGProduction',
@@ -77,6 +82,7 @@ export default {
 	props: {},
 	data() {
 		return {
+			startTime: null, // new Date(2023, 8, 26, 0, 0, 0, 0).getTime(),
 			accumulators: new Map(),
 			searchBarFormConfig: [
 				{
@@ -85,6 +91,7 @@ export default {
 					placeholder: '请选择产线',
 					selectOptions: [],
 					param: 'lineId',
+					onchange: true,
 				},
 				{
 					type: 'select',
@@ -108,6 +115,7 @@ export default {
 					// defaultTime: ['00:00:00', '23:59:59'],
 					placeholder: '选择日期',
 					param: 'recordTime',
+					required: true,
 				},
 				{
 					type: 'button',
@@ -136,7 +144,18 @@ export default {
 			eqList: [],
 			graphList: [],
 			templateConfig: {
-				color: ['#283D68', '#FFB61F', '#4481FF', '#5AD8A6', '#E97466'],
+				color: [
+					'#283D68',
+					'#FFB61F',
+					'#4481FF',
+					'#5AD8A6',
+					'#E97466',
+					'#ccc', //<=== 需按情况更新
+					'#ccc',
+					'#ccc',
+					'#ccc',
+					'#ccc',
+				],
 				grid: {
 					top: 48,
 					left: 48,
@@ -159,25 +178,30 @@ export default {
 				tooltip: {
 					show: true,
 					trigger: 'axis',
-				},
-				xAxis: {
-					type: 'category',
-					boundaryGap: true,
-					axisTick: {
-						// show: false,
-						alignWithLabel: true,
-						lineStyle: {
-							color: '#0003',
-						},
+					formatter: function (params) {
+						return `
+							<div style="margin-bottom: 8px;">${new Date(
+								+params[0].name
+							).toLocaleTimeString()}</div>
+							${params
+								.map(({ seriesName, color, data }) =>
+									data != null
+										? `
+								<div style="min-width: 160px; display: flex; justify-content: space-between; align-items: center;">
+									<span style="display: flex; align-items: center;">
+										<span style="display: inline-block; margin-right: 8px; width: 12px; height: 12px; background: ${color}"></span>
+										<span style="">${seriesName}</span>
+									</span>
+									<span style="color: #c7c7c7; text-align: right;">${data}</span>
+								</div>
+							`
+										: ''
+								)
+								.join('')}
+						`;
 					},
-					axisLabel: {
-						color: '#0007',
-					},
-					data: [],
-					// data: Array(24)
-					// 	.fill(1)
-					// 	.map((item, index) => `${index}:00`),
 				},
+				xAxis: null,
 				yAxis: {
 					type: 'value',
 					name: '产量',
@@ -186,9 +210,12 @@ export default {
 						fontSize: 14,
 						align: 'center',
 					},
-					nameGap: 26,
+					axisLine: {
+						show: true,
+					},
 					max: function (value) {
-						return value.max + Math.floor(value.max / 5);
+						return value.max + Math.ceil(value.max / 4);
+						// return value.max + 50
 					},
 				},
 				series: [
@@ -223,16 +250,29 @@ export default {
 			},
 		};
 	},
+	computed: {
+		timeArr() {
+			return Array(24)
+				.fill(this.startTime)
+				.map((time, index) => time + index * 3600000);
+		},
+	},
 	created() {
 		this.initProductline();
 		this.initWorksection();
 		this.initEquipment();
-		this.getList();
+		// this.getList();
 	},
 	methods: {
 		handleSearchBarBtnClick({ btnName, ...payload }) {
 			switch (btnName) {
 				case 'search':
+					if (!payload.recordTime || payload.recordTime.length <= 0) {
+						this.$message.error('请选择时间段');
+						return;
+					}
+					this.startTime = new Date(payload.recordTime).getTime();
+
 					this.queryParams.lineId = payload.lineId || null;
 					this.queryParams.sectionId = payload.sectionId || null;
 					this.queryParams.equipmentId = payload.equipmentId || null;
@@ -250,6 +290,18 @@ export default {
 			}
 		},
 
+		handleSearchBarChanged({ param, value }) {
+			if (!value) {
+				this.searchBarFormConfig[1].selectOptions = [];
+				return;
+			}
+			switch (param) {
+				case 'lineId':
+					this.getWorksectionById(value);
+					break;
+			}
+		},
+
 		/** 重置查询条件 */
 		initQuery() {
 			this.queryParams.lineId = null;
@@ -267,43 +319,74 @@ export default {
 			});
 		},
 
+		initState() {
+			this.accumulators = new Map();
+			this.templateConfig.series = [];
+		},
+
 		async getList() {
+			this.initState();
+
 			const { code, data } = await this.$axios({
 				url: '/analysis/equipment-analysis/quantity',
 				method: 'get',
 				params: this.queryParams,
 			});
+
+			// const { code, data } = response;
 			if (code == 0) {
 				this.graphList = this.objectToArray(data);
-				// const eq1 = [
-				// 	{ totalQuantity: 20, startTime: 1693964578000 },
-				// 	{ totalQuantity: 43, startTime: 1693964678000 },
-				// 	{ totalQuantity: 12, startTime: 1693964778000 },
-				// 	{ totalQuantity: 11, startTime: 1693964878000 },
-				// 	{ totalQuantity: 98, startTime: 1693965478000 },
-				// 	{ totalQuantity: 87, startTime: 1693965578000 },
-				// ];
-				// eq1.key = 'SS1';
-				// const eq2 = [
-				// 	{ totalQuantity: 23, startTime: 1693961578000 },
-				// 	{ totalQuantity: 42, startTime: 1693964578000 },
-				// 	{ totalQuantity: 51, startTime: 1693965578000 },
-				// 	{ totalQuantity: 18, startTime: 1693966578000 },
-				// 	{ totalQuantity: 77, startTime: 1693966778000 },
-				// 	{ totalQuantity: 38, startTime: 1693967578000 },
-				// 	{ totalQuantity: 57, startTime: 1693969578000 },
-				// ];
-				// eq2.key = 'SS2';
-				// this.graphList = [eq1, eq2];
-
+				this.setXaxis();
 				this.graphList.forEach(this.setSeries);
 			} else {
 				this.graphList = [];
-				this.graphList.forEach(this.setSeries);
 			}
 		},
 
-		setSeries(eqArr) {
+		setXaxis() {
+			const xaxis = {
+				type: 'category',
+				// interval: 12,
+				axisTick: {
+					alignWithLabel: true,
+					lineStyle: {
+						color: '#0003',
+					},
+				},
+				axisLabel: {
+					formatter: function (value, index) {
+						return new Date(+value)
+							.toLocaleTimeString()
+							.split(':')
+							.slice(0, 2)
+							.join(':');
+					},
+				},
+				data: this.timeArr,
+			};
+			this.templateConfig.xAxis = xaxis;
+		},
+
+		setYaxis() {},
+
+		setSeries(list) {
+			const data = Array(24).fill(null);
+			list.map((item, index) => {
+				const idx = this.timeArr.indexOf(item.startTime);
+				if (idx != -1) {
+					data[idx] = item.totalQuantity;
+				}
+			});
+			const seriesItem = {
+				name: list.key,
+				type: 'line',
+				symbol: 'circle',
+				data,
+			};
+			this.templateConfig.series.push(seriesItem);
+		},
+
+		setSeriesOld(eqArr) {
 			if (eqArr.length == 0) {
 				this.templateConfig.series = [];
 				return;
@@ -330,18 +413,6 @@ export default {
 			});
 		},
 
-		/** 获得设备产量 */
-		getEquipmentQuantity(equipmentArr) {
-			return equipmentArr.map((item) => item.totalQuantity);
-		},
-
-		/** 获得设备产量的时间 */
-		getTimeinfo(equipmentArr) {
-			return equipmentArr.map((item) =>
-				new Date(item.startTime).toLocaleTimeString()
-			);
-		},
-
 		/** 准备设备数据 */
 		async initEquipment() {
 			const { code, data } = await this.$axios({
@@ -390,6 +461,25 @@ export default {
 			}
 		},
 
+		/** 根据产线获取工段 */
+		async getWorksectionById(lineId) {
+			const { code, data } = await this.$axios({
+				url: '/base/workshop-section/listByParentId',
+				method: 'get',
+				params: {
+					id: lineId,
+				},
+			});
+			if (code == 0) {
+				this.searchBarFormConfig[1].selectOptions = data.map((item) => {
+					return {
+						name: item.name,
+						id: item.id,
+					};
+				});
+			}
+		},
+
 		async submitForm() {
 			const { code, data } = await this.$axios({
 				url: '/analysis/equipment-analysis/quantity',

src/views/equipment/timing-diagram/output/response.json

@@ -0,0 +1,333 @@
+{
+	"code": 0,
+	"data": {
+		"上片机": [
+			{
+				"inQuantity": 200,
+				"totalQuantity": 199,
+				"outQuantity": 200,
+				"okQuantity": 199,
+				"nokQuantity": 1,
+				"recordTime": 1695657600000,
+				"startTime": 1695657600000
+			},
+			{
+				"inQuantity": 200,
+				"totalQuantity": 189,
+				"outQuantity": 200,
+				"okQuantity": 189,
+				"nokQuantity": 11,
+				"recordTime": 1695661200000,
+				"startTime": 1695661200000
+			},
+			{
+				"inQuantity": 200,
+				"totalQuantity": 198,
+				"outQuantity": 200,
+				"okQuantity": 198,
+				"nokQuantity": 2,
+				"recordTime": 1695664800000,
+				"startTime": 1695664800000
+			},
+			{
+				"inQuantity": 200,
+				"totalQuantity": 197,
+				"outQuantity": 200,
+				"okQuantity": 197,
+				"nokQuantity": 3,
+				"recordTime": 1695668400000,
+				"startTime": 1695668400000
+			},
+			{
+				"inQuantity": 200,
+				"totalQuantity": 200,
+				"outQuantity": 200,
+				"okQuantity": 200,
+				"nokQuantity": 0,
+				"recordTime": 1695672000000,
+				"startTime": 1695672000000
+			},
+			{
+				"inQuantity": 200,
+				"totalQuantity": 170,
+				"outQuantity": 200,
+				"okQuantity": 170,
+				"nokQuantity": 30,
+				"recordTime": 1695675600000,
+				"startTime": 1695675600000
+			},
+			{
+				"inQuantity": 200,
+				"totalQuantity": 199,
+				"outQuantity": 200,
+				"okQuantity": 199,
+				"nokQuantity": 1,
+				"recordTime": 1695679200000,
+				"startTime": 1695679200000
+			},
+			{
+				"inQuantity": 200,
+				"totalQuantity": 199,
+				"outQuantity": 200,
+				"okQuantity": 199,
+				"nokQuantity": 1,
+				"recordTime": 1695682800000,
+				"startTime": 1695682800000
+			},
+			{
+				"inQuantity": 200,
+				"totalQuantity": 195,
+				"outQuantity": 200,
+				"okQuantity": 195,
+				"nokQuantity": 5,
+				"recordTime": 1695686400000,
+				"startTime": 1695686400000
+			},
+			{
+				"inQuantity": 200,
+				"totalQuantity": 198,
+				"outQuantity": 200,
+				"okQuantity": 198,
+				"nokQuantity": 2,
+				"recordTime": 1695690000000,
+				"startTime": 1695690000000
+			},
+			{
+				"inQuantity": 200,
+				"totalQuantity": 199,
+				"outQuantity": 200,
+				"okQuantity": 199,
+				"nokQuantity": 1,
+				"recordTime": 1695693600000,
+				"startTime": 1695693600000
+			},
+			{
+				"inQuantity": 200,
+				"totalQuantity": 197,
+				"outQuantity": 200,
+				"okQuantity": 197,
+				"nokQuantity": 3,
+				"recordTime": 1695697200000,
+				"startTime": 1695697200000
+			},
+			{
+				"inQuantity": 200,
+				"totalQuantity": 197,
+				"outQuantity": 200,
+				"okQuantity": 197,
+				"nokQuantity": 3,
+				"recordTime": 1695700800000,
+				"startTime": 1695700800000
+			},
+			{
+				"inQuantity": 200,
+				"totalQuantity": 196,
+				"outQuantity": 200,
+				"okQuantity": 196,
+				"nokQuantity": 4,
+				"recordTime": 1695704400000,
+				"startTime": 1695704400000
+			},
+			{
+				"inQuantity": 200,
+				"totalQuantity": 193,
+				"outQuantity": 200,
+				"okQuantity": 193,
+				"nokQuantity": 7,
+				"recordTime": 1695708000000,
+				"startTime": 1695708000000
+			},
+			{
+				"inQuantity": 200,
+				"totalQuantity": 190,
+				"outQuantity": 200,
+				"okQuantity": 190,
+				"nokQuantity": 10,
+				"recordTime": 1695711600000,
+				"startTime": 1695711600000
+			},
+			{
+				"inQuantity": 200,
+				"totalQuantity": 199,
+				"outQuantity": 200,
+				"okQuantity": 199,
+				"nokQuantity": 1,
+				"recordTime": 1695715200000,
+				"startTime": 1695715200000
+			},
+			{
+				"inQuantity": 200,
+				"totalQuantity": 200,
+				"outQuantity": 200,
+				"okQuantity": 200,
+				"nokQuantity": 0,
+				"recordTime": 1695718800000,
+				"startTime": 1695718800000
+			},
+			{
+				"inQuantity": 200,
+				"totalQuantity": 200,
+				"outQuantity": 200,
+				"okQuantity": 200,
+				"nokQuantity": 0,
+				"recordTime": 1695722400000,
+				"startTime": 1695722400000
+			},
+			{
+				"inQuantity": 200,
+				"totalQuantity": 198,
+				"outQuantity": 200,
+				"okQuantity": 198,
+				"nokQuantity": 2,
+				"recordTime": 1695726000000,
+				"startTime": 1695726000000
+			},
+			{
+				"inQuantity": 200,
+				"totalQuantity": 199,
+				"outQuantity": 200,
+				"okQuantity": 199,
+				"nokQuantity": 1,
+				"recordTime": 1695729600000,
+				"startTime": 1695729600000
+			},
+			{
+				"inQuantity": 200,
+				"totalQuantity": 189,
+				"outQuantity": 200,
+				"okQuantity": 189,
+				"nokQuantity": 11,
+				"recordTime": 1695733200000,
+				"startTime": 1695733200000
+			},
+			{
+				"inQuantity": 200,
+				"totalQuantity": 179,
+				"outQuantity": 200,
+				"okQuantity": 179,
+				"nokQuantity": 21,
+				"recordTime": 1695736800000,
+				"startTime": 1695736800000
+			},
+			{
+				"inQuantity": 200,
+				"totalQuantity": 200,
+				"outQuantity": 200,
+				"okQuantity": 200,
+				"nokQuantity": 0,
+				"recordTime": 1695740400000,
+				"startTime": 1695740400000
+			}
+		],
+		"下片机": [
+			{
+				"inQuantity": 200,
+				"totalQuantity": 190,
+				"outQuantity": 200,
+				"okQuantity": 190,
+				"nokQuantity": 10,
+				"recordTime": 1695672000000,
+				"startTime": 1695672000000
+			},
+			{
+				"inQuantity": 200,
+				"totalQuantity": 177,
+				"outQuantity": 200,
+				"okQuantity": 177,
+				"nokQuantity": 23,
+				"recordTime": 1695675600000,
+				"startTime": 1695675600000
+			},
+			{
+				"inQuantity": 200,
+				"totalQuantity": 198,
+				"outQuantity": 200,
+				"okQuantity": 198,
+				"nokQuantity": 2,
+				"recordTime": 1695679200000,
+				"startTime": 1695679200000
+			},
+			{
+				"inQuantity": 200,
+				"totalQuantity": 200,
+				"outQuantity": 200,
+				"okQuantity": 200,
+				"nokQuantity": 0,
+				"recordTime": 1695682800000,
+				"startTime": 1695682800000
+			},
+			{
+				"inQuantity": 200,
+				"totalQuantity": 185,
+				"outQuantity": 200,
+				"okQuantity": 185,
+				"nokQuantity": 15,
+				"recordTime": 1695686400000,
+				"startTime": 1695686400000
+			},
+			{
+				"inQuantity": 200,
+				"totalQuantity": 198,
+				"outQuantity": 200,
+				"okQuantity": 198,
+				"nokQuantity": 2,
+				"recordTime": 1695690000000,
+				"startTime": 1695690000000
+			},
+			{
+				"inQuantity": 200,
+				"totalQuantity": 200,
+				"outQuantity": 200,
+				"okQuantity": 200,
+				"nokQuantity": 0,
+				"recordTime": 1695693600000,
+				"startTime": 1695693600000
+			},
+			{
+				"inQuantity": 200,
+				"totalQuantity": 193,
+				"outQuantity": 200,
+				"okQuantity": 193,
+				"nokQuantity": 7,
+				"recordTime": 1695697200000,
+				"startTime": 1695697200000
+			},
+			{
+				"inQuantity": 200,
+				"totalQuantity": 200,
+				"outQuantity": 200,
+				"okQuantity": 200,
+				"nokQuantity": 0,
+				"recordTime": 1695700800000,
+				"startTime": 1695700800000
+			},
+			{
+				"inQuantity": 200,
+				"totalQuantity": 200,
+				"outQuantity": 200,
+				"okQuantity": 200,
+				"nokQuantity": 0,
+				"recordTime": 1695704400000,
+				"startTime": 1695704400000
+			},
+			{
+				"inQuantity": 200,
+				"totalQuantity": 192,
+				"outQuantity": 200,
+				"okQuantity": 192,
+				"nokQuantity": 8,
+				"recordTime": 1695708000000,
+				"startTime": 1695708000000
+			},
+			{
+				"inQuantity": 200,
+				"totalQuantity": 199,
+				"outQuantity": 200,
+				"okQuantity": 199,
+				"nokQuantity": 1,
+				"recordTime": 1695711600000,
+				"startTime": 1695711600000
+			}
+		]
+	}
+}

src/views/equipment/timing-diagram/status/demo.html

@@ -0,0 +1,280 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Document</title>
+	</head>
+	<body>
+		<div
+			id="app"
+			style="width: 100vw; height: 80vh; background: #ccc3; margin: 24px"></div>
+
+		<script src="./echarts.js"></script>
+		<script>
+			function getStartTime(timestamp) {
+				return new Date(new Date(timestamp).toLocaleDateString()).getTime();
+			}
+
+			function renderItem(params, api) {
+				var categoryIndex = api.value(0);
+				var start = api.coord([api.value(1), categoryIndex]);
+				var end = api.coord([api.value(2), categoryIndex]);
+				console.log(`
+                    categoryIndex: ${categoryIndex},
+                    start: ${start},
+                    end: ${end},
+                    api.value0: ${api.value(0)}
+                    api.value1: ${api.value(1)}
+                    api.value2: ${api.value(2)}
+                    params.coordSys: ${JSON.stringify(params.coordSys)}
+                    api.size: ${api.size([0, 1])}
+                    api.style(): ${JSON.stringify(api.style())}
+                `);
+
+				var height = api.size([0, 1])[1] * 2;
+				// 用一个矩形去截取另一个矩形
+				var rectShape = echarts.graphic.clipRectByRect(
+					// 被截取矩形
+					{
+						x: start[0],
+						y: start[1] - height / 2,
+						width: end[0] - start[0],
+						height: height,
+					},
+					// 截取矩形
+					{
+						// 截取掉grid以外的部分，实质是计算方块的偏移量
+						x: params.coordSys.x, // {number} grid rect 的 x
+						// y: params.coordSys.y, // {number} grid rect 的 y
+						y: params.coordSys.y - 16, // {number} grid rect 的 y，并多减掉 16 个单位
+						width: params.coordSys.width, // {number} grid rect 的 width
+						height: params.coordSys.height, // {number} grid rect 的 height
+					}
+				);
+                console.log(`------------- ${JSON.stringify(rectShape)} -------------- `)
+				return (
+					rectShape && {
+						type: 'rect',
+						transition: ['shape'],
+						shape: rectShape,
+						style: api.style(),
+					}
+				);
+			}
+
+			function getXaxisRange(startTime) {
+				return Array(24)
+					.fill(startTime)
+					.map((item, index) => {
+						return new Date(item + index * 3600 * 1000)
+							.toLocaleTimeString()
+							.split(':')
+							.slice(0, 2)
+							.join(':');
+					});
+			}
+
+			function getTodayStart(today) {
+				const [y, m, d] = [
+					today.getFullYear(),
+					today.getMonth(),
+					today.getDate(),
+				];
+				return new Date(y, m, d).getTime();
+			}
+
+			/** 颜色配置 */
+			const types = [
+				{ name: '运行', color: '#288AFF' },
+				{ name: '故障', color: '#FC9C91' },
+				{ name: '计划停机', color: '#FFDC94' },
+				{ name: '空白', color: '#F2F4F9' },
+			];
+
+			const option = {
+				tooltip: {
+					trigger: 'axis',
+					axisPointer: {
+						type: 'none',
+						// label: {
+						// 	backgroundColor: '#6a7985',
+						// },
+					},
+                    formatter: (params) => {
+                        // console.log('formatter', params)
+                        // return `
+                        // <div>${new Date(params[0].value[1]).toLocaleString()} ~ ${new Date(params[0].value[2]).toLocaleString()}</div>
+                        // <div style="display: flex; justify-content: space-between; min-width: 128px; align-items: center;">
+                        //     <span>${params[0].seriesName}</span>
+                        //     <span>${params[0].name}</span>
+                        // </div>
+                        // `
+                        return `
+                        <h1 style="font-size: 18px; font-weight: 600; letter-spacing: 1px;">${params[0].name} <span style="display: inline-block; margin-left: 8px; width: 12px; height: 12px; border-radius: 50%; background: ${params[0].color} "></span></h1>
+                        <div>${new Date(params[0].value[1]).toLocaleString()} ~ ${new Date(params[0].value[2]).toLocaleString()}</div>
+                        `
+                    }
+				},
+				grid: [
+					{
+						id: 0,
+						top: 10,
+                        left: 128,
+                        right: 64,
+						height: 56, 
+					},
+					// {
+					// 	id: 1,
+					// 	top: 80,
+					// 	height: 56,
+					// },
+				],
+				xAxis: [
+					{
+						id: 0,
+						gridIndex: 0,
+						axisTick: {
+							alignWithLabel: true,
+							inside: true,
+						},
+						type: 'time',
+						min: getTodayStart(new Date()), // <===
+						max: getStartTime(new Date().getTime() + 3600 * 24 * 1000), // <===
+						splitNumber: 10,
+						axisLabel: {
+							margin: 12,
+							// rotate: -15,
+							formatter: function (val) {
+								return new Date(val)
+									.toLocaleTimeString()
+									.split(':')
+									.slice(0, 2)
+									.join(':');
+							},
+						},
+						boundaryGap: false,
+						// data: getXaxisRange(getTodayStart(new Date())),
+					},
+					{
+						id: 1,
+						gridIndex: 0,
+						axisLabel: { show: false },
+						axisLine: { show: false },
+					},
+				],
+				yAxis: [
+					// 主y轴
+					{
+						id: 0,
+						gridIndex: 0,
+						type: 'value',
+						splitLine: { show: false },
+						name: '设备1',
+						nameLocation: 'center',
+						nameGap: 56,
+						nameRotate: 0,
+						nameTextStyle: {
+							fontSize: 18,
+						},
+						axisLine: {
+							show: true,
+							lineStyle: {},
+						},
+						axisLabel: { show: false },
+						axisTick: { show: false },
+					},
+					// 辅y轴
+					{
+						id: 1,
+						gridIndex: 0,
+						type: 'value',
+						splitLine: { show: false },
+						axisLabel: { show: false },
+						axisTick: { show: false },
+					},
+				],
+				series: [
+					{
+                        name: '设备1',
+						xAxisIndex: 0,
+						yAxisIndex: 0,
+						type: 'custom',
+						renderItem: renderItem,
+						itemStyle: {
+							opacity: 0.8,
+						},
+						encode: {
+							x: [1, 2],
+							y: 0,
+						},
+						//function getTimestamp(point) {
+						// const t = new Date();
+						// const [y,m,d] = [t.getFullYear(),t.getMonth(),t.getDate()]
+						// const [h,M] = point.split(':')
+						// return new Date(y,m,d,h,M,0,0).getTime()
+						//}
+						data: [
+							{
+								// 01:00 ~ 05:00
+								name: '运行',
+								value: [0, 1695747600000, 1695762000000, 0],
+								itemStyle: {
+									normal: {
+										color: types[0].color,
+									},
+								},
+							},
+							{
+								// 5:00 ~ 8:00
+								name: '故障',
+								value: [0, 1695762000000, 1695772800000, 0],
+								itemStyle: {
+									normal: {
+										color: types[1].color,
+									},
+								},
+							},
+							{
+								// 8:00 ~ 8:39
+								name: '计划停机',
+								value: [0, 1695772800000, 1695775140000, 0],
+								itemStyle: {
+									normal: {
+										color: types[2].color,
+									},
+								},
+							},
+							{
+								// 08:39 ~ 18:00
+								name: '运行',
+								value: [0, 1695775140000, 1695808800000, 0],
+								itemStyle: {
+									normal: {
+										color: types[0].color,
+									},
+								},
+							},
+							{
+								// 18:00 ~ 23:30
+								name: '计划停机',
+								value: [0, 1695808800000, 1695828600000, 0],
+								itemStyle: {
+									normal: {
+										color: types[2].color,
+									},
+								},
+							},
+						],
+					},
+				],
+			};
+
+			const el = document.getElementById('app');
+			const myChart = echarts.init(el);
+
+			console.log('mychart', myChart);
+			myChart.setOption(option);
+		</script>
+	</body>
+</html>

src/views/equipment/timing-diagram/status/gantt.js

@@ -0,0 +1,235 @@
+import * as echarts from 'echarts';
+
+
+function renderItem(params, api) {
+    var categoryIndex = api.value(0);
+    var start = api.coord([api.value(1), categoryIndex]);
+    var end = api.coord([api.value(2), categoryIndex]);
+    var height = api.size([0, 1])[1] * 1;
+    // var height = api.size([0, 1])[1] * 0.8;
+    // var height = 56;
+    var rectShape = echarts.graphic.clipRectByRect(
+        {
+            x: start[0],
+            y: start[1] - height / 2,
+            width: end[0] - start[0],
+            height: height,
+        },
+        {
+            x: params.coordSys.x,
+            y: params.coordSys.y,
+            width: params.coordSys.width,
+            height: params.coordSys.height,
+        }
+    );
+    return (
+        rectShape && {
+            type: 'rect',
+            transition: ['shape'],
+            shape: rectShape,
+            style: api.style(),
+        }
+    );
+}
+
+
+
+/** 颜色配置 */
+const types = [
+    { name: '运行', color: '#5ad8a6' },
+    { name: '故障', color: '#fc9c91' },
+    { name: '计划停机', color: '#000' },
+];
+
+
+/** 从时间戳获取 startTime */
+function getStartTime(timestamp) {
+    return new Date(new Date(timestamp).toLocaleDateString()).getTime();
+}
+
+
+
+export default class GanttGraph {
+    constructor(el) {
+        this.chart = null;
+        this.el = el;
+        /** 默认配置 */
+        this.grid = {
+            top: 32,
+            left: 128,
+            right: 128,
+            bottom: 64,
+        }
+        this.tooltip = {
+            formatter: function (params) {
+                return (
+                    params.marker +
+                    params.name +
+                    ': ' +
+                    new Date(params.value[1]).toLocaleTimeString() +
+                    ' - ' +
+                    new Date(params.value[2]).toLocaleTimeString()
+                );
+            },
+        }
+        this.xAxis = {
+            type: 'time',
+            min: getStartTime(1691568181000), // <===
+            max: getStartTime(1691568181000 + 3600 * 24 * 1000), // <===
+            splitNumber: 10,
+            axisLabel: {
+                // rotate: -15,
+                formatter: function (val) {
+                    return new Date(val).toLocaleTimeString();
+                },
+            },
+            axisTick: {
+                show: true,
+            },
+            splitLine: {
+                show: false,
+            },
+        }
+        this.yAxis = [
+            {
+                interval: 40,
+                axisLine: {
+                    lineStyle: {
+                        color: '',
+                    },
+                },
+                axisLabel: {
+                    fontSize: 18,
+                },
+                axisTick: {
+                    show: false,
+                },
+                splitLine: {
+                    show: true,
+                },
+                // data: [], // <====
+                data: ['设备1', '设备2', '设备3', '设备4'],
+            },
+            {
+                axisLine: {
+                    lineStyle: {
+                        color: '',
+                    },
+                },
+                data: [],
+            },
+        ]
+        this.series = [
+            {
+                type: 'custom',
+                renderItem: renderItem,
+                itemStyle: {
+                    opacity: 0.8,
+                },
+                encode: {
+                    x: [1, 2],
+                    y: 0,
+                },
+                // data: [], // <===
+                data: [
+                    {
+                        name: '运行',
+                        value: [
+                            0,
+                            1691568181000,
+                            1691568181000 + 60 * 60 * 1000,
+                            60 * 10 * 1000,
+                        ],
+                        itemStyle: {
+                            normal: {
+                                color: types[0].color,
+                            },
+                        },
+                    },
+                    {
+                        name: '计划停机',
+                        value: [
+                            0,
+                            1691578581000,
+                            1691578581000 + 10 * 60 * 1000,
+                            60 * 10 * 1000,
+                        ],
+                        itemStyle: {
+                            normal: {
+                                color: types[2].color,
+                            },
+                        },
+                    },
+                    {
+                        name: '运行',
+                        value: [
+                            1,
+                            1691568181000,
+                            1691568181000 + 60 * 60 * 1000,
+                            60 * 10 * 1000,
+                        ],
+                        itemStyle: {
+                            normal: {
+                                color: types[0].color,
+                            },
+                        },
+                    },
+                    {
+                        name: '故障',
+                        value: [
+                            2,
+                            1691538181000,
+                            1691538181000 + 60 * 60 * 1000,
+                            60 * 10 * 1000,
+                        ],
+                        itemStyle: {
+                            normal: {
+                                color: types[1].color,
+                            },
+                        },
+                    },
+                    {
+                        name: '运行',
+                        value: [
+                            2,
+                            1691578181000,
+                            1691578181000 + 90 * 60 * 1000,
+                            90 * 10 * 1000,
+                        ],
+                        itemStyle: {
+                            normal: {
+                                color: types[0].color,
+                            },
+                        },
+                    },
+                    {
+                        name: '计划停机',
+                        value: [
+                            3,
+                            1691528181000,
+                            1691528181000 + 240 * 60 * 1000,
+                            240 * 10 * 1000,
+                        ],
+                        itemStyle: {
+                            normal: {
+                                color: types[2].color,
+                            },
+                        },
+                    },
+                ],
+            },
+        ]
+    }
+
+    init() {
+        this.chart = echarts.init(this.el);
+        this.chart.setOption(this.getOption())
+    }
+
+    getOption() {
+        const { grid, xAxis, yAxis, series, tooltip } = this;
+        return {
+            grid, xAxis, yAxis, series, tooltip
+        }
+    }
+}

src/views/equipment/timing-diagram/status/index.vue

@@ -24,6 +24,7 @@
 				:formConfigs="searchBarFormConfig"
 				ref="search-bar"
 				:remove-blue="true"
+				@select-changed="handleSearchBarSelectChange"
 				@headBtnClick="handleSearchBarBtnClick" />
 		</el-row>
 
@@ -77,41 +78,7 @@
 					class="graphs"
 					v-show="graphList.length"
 					id="status-chart"
-					style="height: 1px; flex: 1">
-					<!-- <div class="graph" v-for="eq in graphList" :key="eq.key">
-						<h2 class="graph-title">{{ eq.key }}</h2>
-
-						<div class="graph-content">
-							<el-popover
-								trigger="hover"
-								v-for="blc in eq"
-								:key="blc.startTime"
-								:title="
-									blc.status == 0
-										? '运行'
-										: blc.status == 2
-										? '故障'
-										: '计划停机'
-								"
-								placement="top"
-								:content="new Date(blc.startTime).toLocaleTimeString()">
-								<div
-									slot="reference"
-									:key="blc.startTime + '__div'"
-									class="graph-item-fixed tick"
-									:class="{
-										running: blc.status == 0,
-										fault: blc.status == 2,
-										stop: blc.status == 1,
-									}"
-									:style="{ height: '32px', width: blc.duration * 2 + 'px' }"
-									:data-time="
-										new Date(blc.startTime).toLocaleTimeString()
-									"></div>
-							</el-popover>
-						</div>
-					</div> -->
-				</div>
+					style="height: 1px; flex: 1"></div>
 				<h2 v-if="!graphList || graphList.length == 0" class="no-data-bg"></h2>
 			</div>
 		</el-row>
@@ -140,46 +107,8 @@
 </template>
 
 <script>
-import * as echarts from 'echarts';
-
-var types = [
-	{ name: '运行', color: '#5ad8a6' },
-	{ name: '故障', color: '#fc9c91' },
-	{ name: '计划停机', color: '#000' },
-];
-function getStartTime(timestamp) {
-	return new Date(new Date(timestamp).toLocaleDateString()).getTime();
-}
-function renderItem(params, api) {
-	var categoryIndex = api.value(0);
-	var start = api.coord([api.value(1), categoryIndex]);
-	var end = api.coord([api.value(2), categoryIndex]);
-	var height = api.size([0, 1])[1] * 1;
-	// var height = api.size([0, 1])[1] * 0.8;
-	// var height = 56;
-	var rectShape = echarts.graphic.clipRectByRect(
-		{
-			x: start[0],
-			y: start[1] - height / 2,
-			width: end[0] - start[0],
-			height: height,
-		},
-		{
-			x: params.coordSys.x,
-			y: params.coordSys.y,
-			width: params.coordSys.width,
-			height: params.coordSys.height,
-		}
-	);
-	return (
-		rectShape && {
-			type: 'rect',
-			transition: ['shape'],
-			shape: rectShape,
-			style: api.style(),
-		}
-	);
-}
+// import * as echarts from 'echarts';
+import Gantt from './gantt';
 
 export default {
 	name: 'SGStatus',
@@ -195,6 +124,7 @@ export default {
 					placeholder: '请选择产线',
 					selectOptions: [],
 					param: 'lineId',
+					onchange: true,
 				},
 				{
 					type: 'select',
@@ -207,18 +137,13 @@ export default {
 				{
 					type: 'datePicker',
 					label: '时间段',
-					// dateType: 'daterange', // datetimerange
 					dateType: 'date',
-					// format: 'yyyy-MM-dd HH:mm:ss',
 					format: 'yyyy-MM-dd',
 					valueFormat: 'yyyy-MM-dd HH:mm:ss',
-					// valueFormat: 'timestamp',
 					rangeSeparator: '-',
-					// startPlaceholder: '开始日期',
-					// endPlaceholder: '结束日期',
 					placeholder: '选择日期',
-					// defaultTime: ['00:00:00', '23:59:59'],
 					param: 'recordTime',
+					required: true,
 				},
 				{
 					type: 'button',
@@ -246,6 +171,8 @@ export default {
 			graphList: [],
 			open: false,
 			eqList: [],
+			startTime: null,
+			gantt: null
 			// demo: [
 			// 	[
 			// 		{
@@ -266,176 +193,6 @@ export default {
 			// 		},
 			// 	],
 			// ],
-			chartOption: {
-				grid: {
-					top: 32,
-					left: 128,
-					right: 128,
-					bottom: 64,
-				},
-				tooltip: {
-					// show: false,
-					formatter: function (params) {
-						return (
-							params.marker +
-							params.name +
-							': ' +
-							new Date(params.value[1]).toLocaleTimeString() +
-							' - ' +
-							new Date(params.value[2]).toLocaleTimeString()
-						);
-					},
-				},
-				xAxis: {
-					type: 'time',
-					min: getStartTime(1691568181000), // <===
-					max: getStartTime(1691568181000 + 3600 * 24 * 1000), // <===
-					splitNumber: 10,
-					axisLabel: {
-						// rotate: -15,
-						formatter: function (val) {
-							return new Date(val).toLocaleTimeString();
-						},
-					},
-					axisTick: {
-						show: true,
-					},
-					splitLine: {
-						show: false,
-					},
-				},
-				yAxis: [
-					{
-						interval: 40,
-						axisLine: {
-							// show: false,
-							lineStyle: {
-								color: '',
-							},
-						},
-						axisLabel: {
-							fontSize: 18,
-						},
-						axisTick: {
-							show: false,
-						},
-						splitLine: {
-							show: true,
-						},
-						// data: [], // <====
-						data: ['设备1', '设备2', '设备3', '设备4'],
-					},
-					{
-						axisLine: {
-							// show: false,
-							lineStyle: {
-								color: '',
-							},
-						},
-						data: [],
-					},
-				],
-				series: [
-					{
-						type: 'custom',
-						renderItem: renderItem,
-						itemStyle: {
-							opacity: 0.8,
-						},
-						encode: {
-							x: [1, 2],
-							y: 0,
-						},
-						// data: [], // <===
-						data: [
-							{
-								name: '运行',
-								value: [
-									0,
-									1691568181000,
-									1691568181000 + 60 * 60 * 1000,
-									60 * 10 * 1000,
-								],
-								itemStyle: {
-									normal: {
-										color: types[0].color,
-									},
-								},
-							},
-							{
-								name: '计划停机',
-								value: [
-									0,
-									1691578581000,
-									1691578581000 + 10 * 60 * 1000,
-									60 * 10 * 1000,
-								],
-								itemStyle: {
-									normal: {
-										color: types[2].color,
-									},
-								},
-							},
-							{
-								name: '运行',
-								value: [
-									1,
-									1691568181000,
-									1691568181000 + 60 * 60 * 1000,
-									60 * 10 * 1000,
-								],
-								itemStyle: {
-									normal: {
-										color: types[0].color,
-									},
-								},
-							},
-							{
-								name: '故障',
-								value: [
-									2,
-									1691538181000,
-									1691538181000 + 60 * 60 * 1000,
-									60 * 10 * 1000,
-								],
-								itemStyle: {
-									normal: {
-										color: types[1].color,
-									},
-								},
-							},
-							{
-								name: '运行',
-								value: [
-									2,
-									1691578181000,
-									1691578181000 + 90 * 60 * 1000,
-									90 * 10 * 1000,
-								],
-								itemStyle: {
-									normal: {
-										color: types[0].color,
-									},
-								},
-							},
-							{
-								name: '计划停机',
-								value: [
-									3,
-									1691528181000,
-									1691528181000 + 240 * 60 * 1000,
-									240 * 10 * 1000,
-								],
-								itemStyle: {
-									normal: {
-										color: types[2].color,
-									},
-								},
-							},
-						],
-					},
-				],
-			},
 		};
 	},
 	computed: {},
@@ -443,7 +200,7 @@ export default {
 		this.initProductline();
 		this.initWorksection();
 		this.initEquipment();
-		this.getList();
+		// this.getList();
 	},
 	mounted() {},
 	watch: {
@@ -512,7 +269,8 @@ export default {
 
 		initChart() {
 			const el = document.getElementById('status-chart');
-			this.chart = echarts.init(el);
+			this.gantt = new Gantt(el);
+			this.gantt.init();
 		},
 
 		/** 重置查询条件 */
@@ -592,9 +350,42 @@ export default {
 			}
 		},
 
+		handleSearchBarSelectChange({ param, value }) {
+			if (!value) {
+				this.searchBarFormConfig[1].selectOptions = [];
+				return;
+			}
+			switch (param) {
+				case 'lineId':
+					this.$axios({
+						url: '/base/workshop-section/listByParentId',
+						method: 'get',
+						params: {
+							id: value,
+						},
+					}).then(({ code, data }) => {
+						if (code == 0) {
+							this.searchBarFormConfig[1].selectOptions = data.map((item) => {
+								return {
+									name: item.name,
+									id: item.id,
+								};
+							});
+						}
+					});
+			}
+		},
+
 		handleSearchBarBtnClick({ btnName, ...payload }) {
 			switch (btnName) {
 				case 'search':
+					if (!payload.recordTime || payload.recordTime.length <= 0) {
+						this.$message.error('请选择时间段');
+						return;
+					}
+
+					this.startTime = new Date(payload.recordTime).getTime();
+
 					this.queryParams.lineId = payload.lineId || null;
 					this.queryParams.sectionId = payload.sectionId || null;
 					this.queryParams.equipmentId = payload.equipmentId || null;

src/views/quality/monitoring/qualityInspectionRecord/dialogForm.vue

@@ -0,0 +1,270 @@
+<!-- 
+    filename: dialogForm.vue
+    author: liubin
+    date: 2023-09-11 15:55:13
+    description: DialogForm for qualityInspectionRecord only
+-->
+
+<template>
+	<el-form
+		ref="form"
+		:model="innerDataForm"
+		label-width="100px"
+		v-loading="formLoading">
+		<el-row :gutter="20">
+			<el-col :span="12">
+				<el-form-item
+					label="检测内容"
+					prop="inspectionDetId"
+					:rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
+					<el-select
+						v-model="innerDataForm.inspectionDetId"
+						placeholder="请选择检测内容"
+						filterable
+						clearable
+						@change="handleInspectionDetChange">
+						<el-option
+							v-for="opt in inspectionDetList"
+							:key="opt.value"
+							:label="opt.label"
+							:value="opt.value" />
+					</el-select>
+				</el-form-item>
+			</el-col>
+
+			<el-col :span="12">
+				<el-form-item
+					label="来源"
+					prop="source"
+					:rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
+					<el-select
+						v-model="innerDataForm.source"
+						placeholder="请选择来源"
+						filterable
+						clearable
+						@change="$emit('update', innerDataForm)">
+						<el-option
+							v-for="opt in [
+								{ label: '手动', value: 1 },
+								{ label: '自动', value: 2 },
+							]"
+							:key="opt.value"
+							:label="opt.label"
+							:value="opt.value" />
+					</el-select>
+				</el-form-item>
+			</el-col>
+		</el-row>
+		<el-row :gutter="20">
+			<el-col :span="12">
+				<el-form-item
+					label="产线"
+					prop="productionLineId"
+					:rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
+					<el-select
+						v-model="innerDataForm.productionLineId"
+						placeholder="请选择产线"
+						filterable
+						clearable
+						@change="handleProductlineChange">
+						<el-option
+							v-for="opt in productionLineList"
+							:key="opt.value"
+							:label="opt.label"
+							:value="opt.value" />
+					</el-select>
+				</el-form-item>
+			</el-col>
+			<el-col :span="12">
+				<el-form-item
+					label="工段"
+					prop="sectionId"
+					:rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
+					<el-select
+						v-model="innerDataForm.sectionId"
+						placeholder="请选择工段"
+						clearable
+						filterable
+						@change="$emit('update', innerDataForm)">
+						<el-option
+							v-for="opt in sectionList"
+							:key="opt.value"
+							:label="opt.label"
+							:value="opt.value" />
+					</el-select>
+				</el-form-item>
+			</el-col>
+		</el-row>
+		<el-row :gutter="20">
+			<el-col :span="12">
+				<el-form-item label="检测人员" prop="checkPerson">
+					<el-input
+						v-model="innerDataForm.checkPerson"
+						clearable
+						@change="$emit('update', innerDataForm)"
+						placeholder="请输入检测人员" />
+				</el-form-item>
+			</el-col>
+
+			<el-col :span="12">
+				<el-form-item
+					label="检测时间"
+					prop="checkTime"
+					:rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
+					<el-date-picker
+						v-model="innerDataForm.checkTime"
+						type="datetime"
+						placeholder="请选择检测时间"
+						value-format="timestamp"
+						@change="$emit('update', innerDataForm)"></el-date-picker>
+				</el-form-item>
+			</el-col>
+		</el-row>
+
+		<el-row :gutter="20">
+			<el-col>
+				<el-form-item label="描述" prop="explainText">
+					<el-input
+						v-model="innerDataForm.explainText"
+						placeholder="请输入描述信息"
+						@change="$emit('update', innerDataForm)"
+						type="textarea"></el-input>
+				</el-form-item>
+			</el-col>
+			<el-col>
+				<el-form-item label="备注" prop="remark">
+					<el-input
+						v-model="innerDataForm.remark"
+						@change="$emit('update', innerDataForm)"
+						placeholder="请输入备注"></el-input>
+				</el-form-item>
+			</el-col>
+		</el-row>
+	</el-form>
+</template>
+
+<script>
+export default {
+	name: 'DialogForm',
+	model: {
+		prop: 'dataForm',
+		event: 'update',
+	},
+	emits: ['update'],
+	components: {},
+	props: {
+		dataForm: {
+			type: Object,
+			default: () => ({}),
+		},
+	},
+	data() {
+		return {
+			formLoading: true,
+			inspectionDetList: [],
+			productionLineList: [],
+			sectionList: [],
+			innerDataForm: {},
+			cacheInspectionDetList: null,
+		};
+	},
+	mounted() {
+		Promise.all([this.getProductLineList(), this.getInspectionDetList()]).then(
+			() => {
+				this.formLoading = false;
+			}
+		);
+	},
+	watch: {
+		// 'innerDataForm.productionLineId': {
+		// 	handler: async function (plId) {
+		// 		if (plId) await this.getWorksectionList(plId);
+		// 	},
+		// 	immediate: true,
+		// },
+		dataForm: {
+			handler: function (dataForm) {
+				this.innerDataForm = Object.assign({}, dataForm);
+
+				if (dataForm.productionLineId)
+					this.getWorksectionList(dataForm.productionLineId);
+			},
+			immediate: true,
+		},
+	},
+	methods: {
+		/** 模拟透传 ref  */
+		validate(cb) {
+			return this.$refs.form.validate(cb);
+		},
+		resetFields(args) {
+			return this.$refs.form.resetFields(args);
+		},
+
+		handleInspectionDetChange(value) {
+			const { id, content } = this.cacheInspectionDetList.find(
+				(item) => item.id == value
+			);
+			this.innerDataForm.inspectionDetId = id;
+			this.innerDataForm.inspectionDetContent = content;
+			this.$emit('update', this.innerDataForm);
+		},
+
+		async handleProductlineChange(id) {
+			// await this.getWorksectionList(id);
+			this.innerDataForm.sectionId = null;
+			this.$emit('update', this.innerDataForm);
+		},
+
+		// getCode
+		async getCode(url) {
+			const response = await this.$axios(url);
+			return response.data;
+		},
+
+		// 获取产线列表
+		async getProductLineList() {
+			const response = await this.$axios('/base/production-line/listAll');
+			this.productionLineList = response.data.map((item) => ({
+				label: item.name,
+				value: item.id,
+			}));
+		},
+
+		// 获取检测内容列表
+		async getInspectionDetList() {
+			const response = await this.$axios(
+				'/base/quality-inspection-det/listAll'
+			);
+			this.cacheInspectionDetList = response.data;
+			this.inspectionDetList = response.data.map((item) => ({
+				label: item.content,
+				value: item.id,
+			}));
+		},
+
+		// 获取工段列表
+		async getWorksectionList(plId) {
+			const response = await this.$axios(
+				'/base/workshop-section/listByParentId',
+				{
+					params: {
+						id: plId,
+					},
+				}
+			);
+			this.sectionList = response.data.map((item) => ({
+				label: item.name,
+				value: item.id,
+			}));
+		},
+	},
+};
+</script>
+
+<style scoped lang="scss">
+.el-date-editor,
+.el-select {
+	width: 100%;
+}
+</style>

src/views/quality/monitoring/qualityInspectionRecord/index.vue

@@ -39,7 +39,7 @@
 			@close="cancel"
 			@cancel="cancel"
 			@confirm="submitForm">
-			<DialogForm v-if="open" ref="form" :dataForm="form" :rows="rows" />
+			<DialogForm v-if="open" ref="form" v-model="form" />
 		</base-dialog>
 	</div>
 </template>
@@ -53,14 +53,15 @@ import {
 	getQualityInspectionRecordPage,
 	exportQualityInspectionRecordExcel,
 } from '@/api/monitoring/qualityInspectionRecord';
-import Editor from '@/components/Editor';
+// import Editor from '@/components/Editor';
 import moment from 'moment';
+import DialogForm from './dialogForm.vue';
 
 import basicPageMixin from '@/mixins/lb/basicPageMixin';
 export default {
 	name: 'QualityInspectionRecord',
 	components: {
-		Editor,
+		DialogForm,
 	},
 	mixins: [basicPageMixin],
 	data() {
@@ -272,32 +273,38 @@ export default {
 	},
 	created() {
 		this.getList();
-		this.getProductLineList();
+		// this.getProductLineList();
 	},
 	watch: {
-		// 注册弹窗里产线改变时的监听事件
-		'form.productionLineId': {
+		form: {
 			handler: function (val) {
-				if (val == null) return;
-				this.$axios('/base/workshop-section/listByParentId', {
-					params: {
-						id: val,
-					},
-				}).then((response) => {
-					this.$set(
-						this.rows[1][1], // 这里索引是硬编码，所以当 this.rows 里数据顺序改变时，此处也要改
-						'options',
-						response.data.map((item) => {
-							return {
-								label: item.name,
-								value: item.id,
-							};
-						})
-					);
-				});
+				console.log('form change:', val);
 			},
-			immediate: true,
-		},
+			deep: true
+		}
+		// 注册弹窗里产线改变时的监听事件
+		// 'form.productionLineId': {
+		// 	handler: function (val) {
+		// 		if (val == null) return;
+		// 		this.$axios('/base/workshop-section/listByParentId', {
+		// 			params: {
+		// 				id: val,
+		// 			},
+		// 		}).then((response) => {
+		// 			this.$set(
+		// 				this.rows[1][1], // 这里索引是硬编码，所以当 this.rows 里数据顺序改变时，此处也要改
+		// 				'options',
+		// 				response.data.map((item) => {
+		// 					return {
+		// 						label: item.name,
+		// 						value: item.id,
+		// 					};
+		// 				})
+		// 			);
+		// 		});
+		// 	},
+		// 	immediate: true,
+		// },
 	},
 	methods: {
 		/** 获取搜索栏的产线列表 */
@@ -366,7 +373,11 @@ export default {
 			const id = row.id;
 			getQualityInspectionRecord(id).then((response) => {
 				/** 因为后端返回的时间是时间戳格式，需转换 */
-				this.form = this.filterData(response.data, Object.keys(this.form));
+				const info = {}
+				Object.keys(this.form).forEach(key => {
+					info[key] = response.data[key]
+				});
+				this.form = info;
 				this.open = true;
 				this.title = '修改质量检查信息记录表';
 			});

src/views/quality/monitoring/qualityStatistics/components/graphs/line.vue

@@ -147,7 +147,7 @@ export default {
 				},
 				yAxis: {
 					type: 'value',
-					name: '单位/片',
+					name: '检测数量',
 					nameTextStyle: {
 						color: '#999',
 						fontSize: 14,