Compare commits
	
		
			25 Commits
		
	
	
		
			03c573d5b2
			...
			master
		
	
	| Author | SHA1 | Date | |
|---|---|---|---|
| 9be57ad750 | |||
| f7313c5911 | |||
| a7e81ad8fb | |||
| 32cbf9076f | |||
| 9a411cc663 | |||
|  | 445a88e540 | ||
|  | 2b355aaf8f | ||
| f60a46ed1d | |||
| 2688896660 | |||
|  | 4a67e226e1 | ||
|  | 11ee0d6541 | ||
| 98b3237c9a | |||
|  | 46aaa47e07 | ||
| ca0f62b2eb | |||
| 5534104e87 | |||
| b72fe1bfed | |||
| f4493bde1c | |||
|  | d682ecc91c | ||
|  | 2b76ef7d23 | ||
| 9ec13b35b8 | |||
| 7acccd3de0 | |||
| e40f45a79a | |||
| 77083a84a1 | |||
| 9f53ea6981 | |||
| 8f634d012c | 
							
								
								
									
										2
									
								
								.env.dev
									
									
									
									
									
								
							
							
						
						
									
										2
									
								
								.env.dev
									
									
									
									
									
								
							| @@ -1,7 +1,7 @@ | |||||||
| ### | ### | ||||||
|  # @Author: Do not edit |  # @Author: Do not edit | ||||||
|  # @Date: 2023-08-29 09:40:39 |  # @Date: 2023-08-29 09:40:39 | ||||||
|  # @LastEditTime: 2023-09-18 10:44:07 |  # @LastEditTime: 2023-10-16 09:22:52 | ||||||
|  # @LastEditors: DY |  # @LastEditors: DY | ||||||
|  # @Description:  |  # @Description:  | ||||||
| ###  | ###  | ||||||
|   | |||||||
| @@ -75,7 +75,7 @@ | |||||||
|     "vue-count-to": "1.0.13", |     "vue-count-to": "1.0.13", | ||||||
|     "vue-cropper": "0.5.8", |     "vue-cropper": "0.5.8", | ||||||
|     "vue-meta": "^2.4.0", |     "vue-meta": "^2.4.0", | ||||||
|     "vue-plugin-hiprint": "^0.0.54-fix", |     "vue-plugin-hiprint": "0.0.54-fix", | ||||||
|     "vue-quill-editor": "^3.0.6", |     "vue-quill-editor": "^3.0.6", | ||||||
|     "vue-router": "3.4.9", |     "vue-router": "3.4.9", | ||||||
|     "vue-video-player": "^5.0.2", |     "vue-video-player": "^5.0.2", | ||||||
|   | |||||||
| @@ -1,3 +1,10 @@ | |||||||
|  | /* | ||||||
|  |  * @Author: Do not edit | ||||||
|  |  * @Date: 2023-08-28 15:30:53 | ||||||
|  |  * @LastEditTime: 2023-10-13 17:08:33 | ||||||
|  |  * @LastEditors: DY | ||||||
|  |  * @Description:  | ||||||
|  |  */ | ||||||
| import request from '@/utils/request' | import request from '@/utils/request' | ||||||
|  |  | ||||||
| // 创建产线目前生产产品表 主要为更新 | // 创建产线目前生产产品表 主要为更新 | ||||||
| @@ -35,11 +42,11 @@ export function getLineBindProductLog(id) { | |||||||
| } | } | ||||||
|  |  | ||||||
| // 获得产线目前生产产品表 主要为更新分页 | // 获得产线目前生产产品表 主要为更新分页 | ||||||
| export function getLineBindProductLogPage(query) { | export function getLineBindProductLogPage(data) { | ||||||
|   return request({ |   return request({ | ||||||
|     url: '/base/line-bind-product-log/page', |     url: '/base/line-bind-product-log/page', | ||||||
|     method: 'get', |     method: 'post', | ||||||
|     params: query |     data: data | ||||||
|   }) |   }) | ||||||
| } | } | ||||||
|  |  | ||||||
|   | |||||||
							
								
								
									
										15
									
								
								src/assets/icons/svg/changelogo.svg
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										15
									
								
								src/assets/icons/svg/changelogo.svg
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,15 @@ | |||||||
|  | <?xml version="1.0" encoding="UTF-8"?> | ||||||
|  | <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> | ||||||
|  |     <title>状态切换备份 3</title> | ||||||
|  |     <g id="页面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> | ||||||
|  |         <g id="icon和插图" transform="translate(-877.000000, -246.000000)"> | ||||||
|  |             <g id="状态切换备份-3" transform="translate(885.000000, 254.000000) rotate(-270.000000) translate(-885.000000, -254.000000) translate(877.000000, 246.000000)"> | ||||||
|  |                 <rect id="矩形" stroke="#979797" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="15" height="15"></rect> | ||||||
|  |                 <g id="错误" transform="translate(0.000000, 0.000000)" fill-rule="nonzero"> | ||||||
|  |                     <rect id="矩形" fill="#000000" opacity="0" x="0" y="6.4293957e-15" width="16" height="16"></rect> | ||||||
|  |                     <path d="M8,1 C11.85,1 15,4.15 15,8 C15,11.85 11.85,15 8,15 C4.15,15 1,11.85 1,8 C1,4.15 4.15,1 8,1 Z M8,2.19926499 C4.80249503,2.19926499 2.18635461,4.80959575 2.18635461,8 C2.18635461,11.1904043 4.80249503,13.800735 8,13.800735 C11.197505,13.800735 13.8136454,11.1904043 13.8136454,8 C13.8136454,4.80959575 11.197505,2.19926499 8,2.19926499 Z M9.18342887,4.39602962 C9.42080763,4.39602962 9.61773566,4.56921978 9.65474747,4.7961346 L9.66099805,4.87359881 L9.66052938,9.97276858 L10.1621026,9.47231604 C10.3071657,9.32725295 10.5223305,9.29501672 10.6985498,9.37560733 L10.7713701,9.41705393 L10.837514,9.47231606 C11.0033004,9.63810246 11.0217211,9.89545015 10.8927761,10.0815835 L10.837514,10.1477274 L9.52115984,11.4640816 C9.38457467,11.600698 9.17913638,11.6415719 9.00066062,11.5676398 C8.84450229,11.5029526 8.73591407,11.3615296 8.71120699,11.1977853 L8.70585968,11.1264012 L8.70585968,4.87359881 C8.70585968,4.60984463 8.91967469,4.39602962 9.18342887,4.39602962 Z M6.99933939,4.43236016 C7.15549771,4.49704738 7.26408594,4.63847045 7.28879302,4.80221473 L7.29414032,4.87359881 L7.29414032,11.1264012 C7.29414032,11.2530604 7.24382515,11.374532 7.15426356,11.4640936 C7.06470196,11.5536552 6.94323037,11.6039704 6.81657114,11.6039704 C6.68991191,11.6039704 6.56844032,11.5536552 6.47887872,11.4640936 C6.40722945,11.3924443 6.36069788,11.3003726 6.34495123,11.2015604 L6.33900196,11.1264012 L6.33858601,6.02634681 L5.83789738,6.52768395 C5.69283427,6.67274705 5.47766955,6.70498329 5.30145018,6.62439268 L5.22862992,6.58294608 L5.162486,6.52768394 C4.9966996,6.36189754 4.97827889,6.10454984 5.10722387,5.91841648 L5.162486,5.85227257 L6.47884017,4.53591839 C6.61542534,4.39930202 6.82086362,4.35842813 6.99933939,4.43236016 Z" id="形状结合" fill="#0B58FF"></path> | ||||||
|  |                 </g> | ||||||
|  |             </g> | ||||||
|  |         </g> | ||||||
|  |     </g> | ||||||
|  | </svg> | ||||||
| After Width: | Height: | Size: 2.7 KiB | 
							
								
								
									
										
											BIN
										
									
								
								src/assets/images/default-file-icon.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										
											BIN
										
									
								
								src/assets/images/default-file-icon.png
									
									
									
									
									
										Normal file
									
								
							
										
											Binary file not shown.
										
									
								
							| After Width: | Height: | Size: 1.6 KiB | 
							
								
								
									
										
											BIN
										
									
								
								src/assets/images/tuple.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										
											BIN
										
									
								
								src/assets/images/tuple.png
									
									
									
									
									
										Normal file
									
								
							
										
											Binary file not shown.
										
									
								
							| After Width: | Height: | Size: 944 B | 
| @@ -10,6 +10,8 @@ | |||||||
| 		ref="form" | 		ref="form" | ||||||
| 		:model="form" | 		:model="form" | ||||||
| 		:label-width="`${labelWidth}px`" | 		:label-width="`${labelWidth}px`" | ||||||
|  | 		:size="size" | ||||||
|  | 		:label-position="labelPosition" | ||||||
| 		v-loading="formLoading"> | 		v-loading="formLoading"> | ||||||
| 		<el-row :gutter="20" v-for="(row, rindex) in rows" :key="rindex"> | 		<el-row :gutter="20" v-for="(row, rindex) in rows" :key="rindex"> | ||||||
| 			<el-col v-for="col in row" :key="col.label" :span="24 / row.length"> | 			<el-col v-for="col in row" :key="col.label" :span="24 / row.length"> | ||||||
| @@ -46,23 +48,6 @@ | |||||||
| 						:placeholder="`请选择${col.label}`" | 						:placeholder="`请选择${col.label}`" | ||||||
| 						value-format="timestamp" | 						value-format="timestamp" | ||||||
| 						v-bind="col.bind"></el-date-picker> | 						v-bind="col.bind"></el-date-picker> | ||||||
| 					<el-upload |  | ||||||
| 						class="upload-in-dialog" |  | ||||||
| 						v-if="col.upload" |  | ||||||
| 						:file-list="uploadedFileList" |  | ||||||
| 						:action="col.url" |  | ||||||
| 						:on-success="handleUploadSuccess" |  | ||||||
| 						v-bind="col.bind"> |  | ||||||
| 						<el-button |  | ||||||
| 							size="small" |  | ||||||
| 							type="primary" |  | ||||||
| 							:disabled="col.bind?.disabled || false"> |  | ||||||
| 							点击上传 |  | ||||||
| 						</el-button> |  | ||||||
| 						<div class="el-upload__tip" slot="tip" v-if="col.uploadTips"> |  | ||||||
| 							{{ col.uploadTips || '只能上传jpg/png文件,大小不超过2MB' }} |  | ||||||
| 						</div> |  | ||||||
| 					</el-upload> |  | ||||||
| 					<el-switch | 					<el-switch | ||||||
| 						v-if="col.switch" | 						v-if="col.switch" | ||||||
| 						v-model="form[col.prop]" | 						v-model="form[col.prop]" | ||||||
| @@ -74,6 +59,43 @@ | |||||||
| 						:key="col.key" | 						:key="col.key" | ||||||
| 						:is="col.subcomponent" | 						:is="col.subcomponent" | ||||||
| 						:inlineStyle="col.style"></component> | 						:inlineStyle="col.style"></component> | ||||||
|  |  | ||||||
|  | 					<div | ||||||
|  | 						class="upload-area" | ||||||
|  | 						:class="uploadOpen ? '' : 'height-48'" | ||||||
|  | 						ref="uploadArea" | ||||||
|  | 						v-if="col.upload"> | ||||||
|  | 						<span class="close-icon" :class="uploadOpen ? 'open' : ''"> | ||||||
|  | 							<el-button | ||||||
|  | 								type="text" | ||||||
|  | 								icon="el-icon-arrow-right" | ||||||
|  | 								@click="handleFilesOpen" /> | ||||||
|  | 						</span> | ||||||
|  | 						<!-- :file-list="uploadedFileList" --> | ||||||
|  | 						<el-upload | ||||||
|  | 							class="upload-in-dialog" | ||||||
|  | 							v-if="col.upload" | ||||||
|  | 							:action="uploadUrl" | ||||||
|  | 							:headers="uploadHeaders" | ||||||
|  | 							:show-file-list="false" | ||||||
|  | 							icon="el-icon-upload2" | ||||||
|  | 							:before-upload="beforeUpload" | ||||||
|  | 							:on-success="handleUploadSuccess" | ||||||
|  | 							v-bind="col.bind"> | ||||||
|  | 							<el-button size="mini" :disabled="col.bind?.disabled || false"> | ||||||
|  | 								上传文件 | ||||||
|  | 							</el-button> | ||||||
|  | 							<div class="el-upload__tip" slot="tip" v-if="col.uploadTips"> | ||||||
|  | 								{{ col.uploadTips || '只能上传jpg/png文件, 大小不超过2MB' }} | ||||||
|  | 							</div> | ||||||
|  | 						</el-upload> | ||||||
|  |  | ||||||
|  | 						<uploadedFile | ||||||
|  | 							class="file" | ||||||
|  | 							v-for="file in form[col.prop] || []" | ||||||
|  | 							:file="file" | ||||||
|  | 							@delete="handleDeleteFile(file)" /> | ||||||
|  | 					</div> | ||||||
| 				</el-form-item> | 				</el-form-item> | ||||||
| 			</el-col> | 			</el-col> | ||||||
| 		</el-row> | 		</el-row> | ||||||
| @@ -81,6 +103,9 @@ | |||||||
| </template> | </template> | ||||||
|  |  | ||||||
| <script> | <script> | ||||||
|  | import { getAccessToken } from '@/utils/auth'; | ||||||
|  | import tupleImg from '@/assets/images/tuple.png'; | ||||||
|  |  | ||||||
| /** | /** | ||||||
|  * 找到最长的label |  * 找到最长的label | ||||||
|  * @param {*} options |  * @param {*} options | ||||||
| @@ -99,6 +124,48 @@ function findMaxLabelWidth(rows) { | |||||||
| 	return max; | 	return max; | ||||||
| } | } | ||||||
|  |  | ||||||
|  | const uploadedFile = { | ||||||
|  | 	name: 'UploadedFile', | ||||||
|  | 	props: ['file'], | ||||||
|  | 	data() { | ||||||
|  | 		return {}; | ||||||
|  | 	}, | ||||||
|  | 	methods: { | ||||||
|  | 		handleDelete() { | ||||||
|  | 			console.log('emit delete event') | ||||||
|  | 			this.$emit('delete', this.file); | ||||||
|  | 		}, | ||||||
|  | 	}, | ||||||
|  | 	mounted() {}, | ||||||
|  | 	render: function (h) { | ||||||
|  | 		return ( | ||||||
|  | 			<div | ||||||
|  | 				title={this.file.fileName} | ||||||
|  | 				style={{ | ||||||
|  | 					background: `url(${tupleImg}) no-repeat`, | ||||||
|  | 					backgroundSize: '14px', | ||||||
|  | 					backgroundPosition: '0 55%', | ||||||
|  | 					paddingLeft: '20px', | ||||||
|  | 					paddingRight: '24px', | ||||||
|  | 					textOverflow: 'ellipsis', | ||||||
|  | 					whiteSpace: 'nowrap', | ||||||
|  | 					overflow: 'hidden', | ||||||
|  | 					cursor: 'pointer', | ||||||
|  | 					display: 'inline-block', | ||||||
|  | 				}}> | ||||||
|  | 				{this.file.fileName} | ||||||
|  | 				<el-button | ||||||
|  | 					type="text" | ||||||
|  | 					icon="el-icon-close" | ||||||
|  | 					style="float: right; position: relative; top: 2px; left: 8px; z-index: 100" | ||||||
|  | 					class="dialog__upload_component__close" | ||||||
|  | 					onClick={this.handleDelete} | ||||||
|  | 				/> | ||||||
|  | 			</div> | ||||||
|  | 		); | ||||||
|  | 	}, | ||||||
|  | }; | ||||||
|  |  | ||||||
| export default { | export default { | ||||||
| 	name: 'DialogForm', | 	name: 'DialogForm', | ||||||
| 	model: { | 	model: { | ||||||
| @@ -106,7 +173,7 @@ export default { | |||||||
| 		event: 'update', | 		event: 'update', | ||||||
| 	}, | 	}, | ||||||
| 	emits: ['update'], | 	emits: ['update'], | ||||||
| 	components: {}, | 	components: { uploadedFile }, | ||||||
| 	props: { | 	props: { | ||||||
| 		rows: { | 		rows: { | ||||||
| 			type: Array, | 			type: Array, | ||||||
| @@ -119,14 +186,26 @@ export default { | |||||||
| 		disabled: { | 		disabled: { | ||||||
| 			type: Boolean, | 			type: Boolean, | ||||||
| 			default: false, | 			default: false, | ||||||
| 		} | 		}, | ||||||
|  | 		labelPosition: { | ||||||
|  | 			type: String, | ||||||
|  | 			default: 'right', | ||||||
|  | 		}, | ||||||
|  | 		size: { | ||||||
|  | 			type: String, | ||||||
|  | 			default: '', | ||||||
|  | 		}, | ||||||
| 	}, | 	}, | ||||||
| 	data() { | 	data() { | ||||||
| 		return { | 		return { | ||||||
|  | 			uploadOpen: false, | ||||||
|  | 			form: {}, | ||||||
| 			formLoading: true, | 			formLoading: true, | ||||||
| 			optionListOf: {}, | 			optionListOf: {}, | ||||||
| 			uploadedFileList: [], | 			uploadedFileList: [], | ||||||
| 			dataLoaded: false, | 			dataLoaded: false, | ||||||
|  | 			uploadHeaders: { Authorization: 'Bearer ' + getAccessToken() }, | ||||||
|  | 			uploadUrl: process.env.VUE_APP_BASE_API + '/admin-api/infra/file/upload', // 上传有关的headers,url都是固定的 | ||||||
| 		}; | 		}; | ||||||
| 	}, | 	}, | ||||||
| 	computed: { | 	computed: { | ||||||
| @@ -136,16 +215,6 @@ export default { | |||||||
| 			return max * 20; | 			return max * 20; | ||||||
| 			// return max * 20 + 'px'; | 			// return max * 20 + 'px'; | ||||||
| 		}, | 		}, | ||||||
| 		form: { |  | ||||||
| 			get() { |  | ||||||
| 				// if (this.dataLoaded) return this.dataForm; |  | ||||||
| 				// else return {} |  | ||||||
| 				return this.dataForm; |  | ||||||
| 			}, |  | ||||||
| 			set(val) { |  | ||||||
| 				console.log('set form', val); |  | ||||||
| 			}, |  | ||||||
| 		}, |  | ||||||
| 	}, | 	}, | ||||||
| 	watch: { | 	watch: { | ||||||
| 		rows: { | 		rows: { | ||||||
| @@ -158,6 +227,13 @@ export default { | |||||||
| 			deep: true, | 			deep: true, | ||||||
| 			immediate: false, | 			immediate: false, | ||||||
| 		}, | 		}, | ||||||
|  | 		dataForm: { | ||||||
|  | 			handler(val) { | ||||||
|  | 				this.form = JSON.parse(JSON.stringify(val)); | ||||||
|  | 			}, | ||||||
|  | 			deep: true, | ||||||
|  | 			immediate: true, | ||||||
|  | 		}, | ||||||
| 	}, | 	}, | ||||||
| 	mounted() { | 	mounted() { | ||||||
| 		// 处理 options | 		// 处理 options | ||||||
| @@ -273,23 +349,27 @@ export default { | |||||||
| 		beforeUpload() {}, | 		beforeUpload() {}, | ||||||
| 		// 上传前的验证规则可通过 bind 属性传入 | 		// 上传前的验证规则可通过 bind 属性传入 | ||||||
| 		handleUploadSuccess(response, file, fileList) { | 		handleUploadSuccess(response, file, fileList) { | ||||||
| 			console.log( | 			this.form.files.push({ | ||||||
| 				'[dialogForm:handleUploadSuccess]', | 				fileName: file.name, | ||||||
| 				response, | 				fileUrl: response.data, | ||||||
| 				file, | 				fileType: 2, | ||||||
| 				fileList, | 			}); | ||||||
| 				this.form |  | ||||||
| 			); |  | ||||||
| 			// 保存原始文件名 |  | ||||||
| 			if ('fileNames' in this.form) this.form.fileNames.push(file.name); |  | ||||||
| 			// 保存完整地址 |  | ||||||
| 			if ('fileUrls' in this.form) this.form.fileUrls.push(response.data); |  | ||||||
| 			this.$modal.msgSuccess('上传成功'); | 			this.$modal.msgSuccess('上传成功'); | ||||||
|  | 			this.$emit('update', this.form); | ||||||
| 		}, | 		}, | ||||||
|  |  | ||||||
| 		getFileName(fileUrl) { | 		getFileName(fileUrl) { | ||||||
| 			return fileUrl.split('/').pop(); | 			return fileUrl.split('/').pop(); | ||||||
| 		}, | 		}, | ||||||
|  |  | ||||||
|  | 		handleFilesOpen() { | ||||||
|  | 			this.uploadOpen = !this.uploadOpen; | ||||||
|  | 		}, | ||||||
|  |  | ||||||
|  | 		handleDeleteFile(file) { | ||||||
|  | 			this.form.files = this.form.files.filter(item => item.fileUrl != file.fileUrl); | ||||||
|  | 			this.$emit('update', this.form); | ||||||
|  | 		}, | ||||||
| 	}, | 	}, | ||||||
| }; | }; | ||||||
| </script> | </script> | ||||||
| @@ -299,4 +379,52 @@ export default { | |||||||
| .el-select { | .el-select { | ||||||
| 	width: 100%; | 	width: 100%; | ||||||
| } | } | ||||||
|  |  | ||||||
|  | .upload-area { | ||||||
|  | 	// background: #ccc; | ||||||
|  | 	// display: grid; | ||||||
|  | 	// grid-auto-rows: 34px; | ||||||
|  | 	// grid-template-columns: repeat(6, minmax(32px, max-content)); | ||||||
|  | 	// gap: 8px; | ||||||
|  | 	// align-items: center; | ||||||
|  | 	position: relative; | ||||||
|  | 	overflow: hidden; | ||||||
|  | 	transition: height 0.3s ease-out; | ||||||
|  | } | ||||||
|  |  | ||||||
|  | .upload-in-dialog { | ||||||
|  | 	// display: inline-block; | ||||||
|  | 	margin-right: 24px; | ||||||
|  | 	// background: #ccc; | ||||||
|  | 	position: relative; | ||||||
|  | 	// top: -13px; | ||||||
|  | 	float: left; | ||||||
|  | } | ||||||
|  |  | ||||||
|  | .close-icon { | ||||||
|  | 	// background: #ccc; | ||||||
|  | 	position: absolute; | ||||||
|  | 	top: 0; | ||||||
|  | 	right: 12px; | ||||||
|  | 	z-index: 100; | ||||||
|  | 	transition: transform 0.3s ease-out; | ||||||
|  | } | ||||||
|  |  | ||||||
|  | .close-icon.open { | ||||||
|  | 	transform: rotateZ(90deg); | ||||||
|  | } | ||||||
|  | </style> | ||||||
|  |  | ||||||
|  | <style> | ||||||
|  | .dialog__upload_component__close { | ||||||
|  | 	color: #ccc; | ||||||
|  | } | ||||||
|  | .dialog__upload_component__close:hover { | ||||||
|  | 	/* color: #777; */ | ||||||
|  | 	color: red; | ||||||
|  | } | ||||||
|  |  | ||||||
|  | .height-48 { | ||||||
|  | 	height: 35px !important; | ||||||
|  | } | ||||||
| </style> | </style> | ||||||
|   | |||||||
| @@ -151,7 +151,7 @@ export default { | |||||||
| 				name: '', | 				name: '', | ||||||
| 				plcParamName: '', | 				plcParamName: '', | ||||||
| 				unit: '', | 				unit: '', | ||||||
| 				collection: '', | 				collection: 1, | ||||||
| 				minValue: '', | 				minValue: '', | ||||||
| 				maxValue: '', | 				maxValue: '', | ||||||
| 				defaultValue: '', | 				defaultValue: '', | ||||||
| @@ -370,7 +370,7 @@ export default { | |||||||
| 				name: '', | 				name: '', | ||||||
| 				plcParamName: '', | 				plcParamName: '', | ||||||
| 				unit: '', | 				unit: '', | ||||||
| 				collection: '', | 				collection: 1, | ||||||
| 				minValue: '', | 				minValue: '', | ||||||
| 				maxValue: '', | 				maxValue: '', | ||||||
| 				defaultValue: '', | 				defaultValue: '', | ||||||
|   | |||||||
| @@ -1,7 +1,7 @@ | |||||||
| <!-- | <!-- | ||||||
|  * @Author: zhp |  * @Author: zhp | ||||||
|  * @Date: 2023-09-13 09:02:25 |  * @Date: 2023-09-13 09:02:25 | ||||||
|  * @LastEditTime: 2023-10-08 15:39:38 |  * @LastEditTime: 2023-10-16 14:56:58 | ||||||
|  * @LastEditors: DY |  * @LastEditors: DY | ||||||
|  * @Description: |  * @Description: | ||||||
| --> | --> | ||||||
|   | |||||||
| @@ -1,8 +1,12 @@ | |||||||
| <template> | <template> | ||||||
|   <div class="app-container"> |   <div class="app-container"> | ||||||
|     <search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" /> |     <search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" /> | ||||||
|     <base-table v-loading="dataListLoading" :span-method="mergeColumnHandler" :table-props="tableProps" :table-data="tableData" /> |     <div v-if="tableData.length"> | ||||||
|     <balance-chart ref="lineChart" /> |       <base-table v-loading="dataListLoading" :span-method="mergeColumnHandler" :table-props="tableProps" :table-data="tableData" /> | ||||||
|  |       <SearchBar :formConfigs="[{ label: '产线平衡分析图', type: 'title' }]" /> | ||||||
|  |       <balance-chart ref="lineChart" /> | ||||||
|  |     </div> | ||||||
|  |     <div v-else class="no-data-bg"></div> | ||||||
|     <!-- <pagination |     <!-- <pagination | ||||||
| 			:limit.sync="listQuery.pageSize" | 			:limit.sync="listQuery.pageSize" | ||||||
| 			:page.sync="listQuery.pageNo" | 			:page.sync="listQuery.pageNo" | ||||||
| @@ -89,7 +93,7 @@ export default { | |||||||
|         }, |         }, | ||||||
|         { |         { | ||||||
|           type: 'button', |           type: 'button', | ||||||
|           btnName: '搜索', |           btnName: '查询', | ||||||
|           name: 'search', |           name: 'search', | ||||||
|           color: 'primary', |           color: 'primary', | ||||||
|         } |         } | ||||||
| @@ -144,11 +148,6 @@ export default { | |||||||
|       // this.listQuery.lineId = '1672847052717821953' |       // this.listQuery.lineId = '1672847052717821953' | ||||||
|       // this.listQuery.startTime = '1693497600000'; |       // this.listQuery.startTime = '1693497600000'; | ||||||
|       // this.listQuery.endTime = '1693843200000'; |       // this.listQuery.endTime = '1693843200000'; | ||||||
|       this.tableData.splice(0) |  | ||||||
|       this.xData.splice(0) |  | ||||||
|       this.yData.splice(0) |  | ||||||
|       this.tableProps.splice(0) |  | ||||||
|       this.spanArr.splice(0) |  | ||||||
|       this.urlOptions.getDataListURL(this.listQuery).then(res => { |       this.urlOptions.getDataListURL(this.listQuery).then(res => { | ||||||
|         console.log(res) |         console.log(res) | ||||||
|         let arr = [ |         let arr = [ | ||||||
| @@ -228,11 +227,17 @@ export default { | |||||||
|           this.listQuery.lineId = val.lineIds |           this.listQuery.lineId = val.lineIds | ||||||
|           this.listQuery.startTime = val.time ? String(new Date(val.time[0]).getTime()) : undefined; |           this.listQuery.startTime = val.time ? String(new Date(val.time[0]).getTime()) : undefined; | ||||||
|           this.listQuery.endTime = val.time ? String(new Date(val.time[1]).getTime()) : undefined; |           this.listQuery.endTime = val.time ? String(new Date(val.time[1]).getTime()) : undefined; | ||||||
|           if (val.time) { |           if (val.time && val.lineIds) { | ||||||
|  |             this.tableData = [] | ||||||
|  |             this.xData = [] | ||||||
|  |             this.yData = [] | ||||||
|  |             this.tableProps = [] | ||||||
|  |             this.spanArr = [] | ||||||
|  |             this.timeList = [] | ||||||
|             this.getData() |             this.getData() | ||||||
|           } else { |           } else { | ||||||
|             this.$message({ |             this.$message({ | ||||||
|               message: '请选择时间', |               message: '请选择产线和时间', | ||||||
|               type: 'warning' |               type: 'warning' | ||||||
|             }); |             }); | ||||||
|           } |           } | ||||||
|   | |||||||
| @@ -1,8 +1,12 @@ | |||||||
| <template> | <template> | ||||||
|   <div class="app-container"> |   <div class="app-container"> | ||||||
|     <search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" /> |     <search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" /> | ||||||
|     <base-table v-loading="dataListLoading" :table-props="tableProps" :table-data="tableData" /> |     <div v-if="tableData.length"> | ||||||
|     <line-chart ref="lineChart" /> |       <base-table v-loading="dataListLoading" :table-props="tableProps" :table-data="tableData" /> | ||||||
|  |       <SearchBar :formConfigs="[{ label: '产品产量对比图', type: 'title' }]" /> | ||||||
|  |       <line-chart ref="lineChart" /> | ||||||
|  |     </div> | ||||||
|  |     <div v-else class="no-data-bg"></div> | ||||||
|     <!-- <pagination |     <!-- <pagination | ||||||
| 			:limit.sync="listQuery.pageSize" | 			:limit.sync="listQuery.pageSize" | ||||||
| 			:page.sync="listQuery.pageNo" | 			:page.sync="listQuery.pageNo" | ||||||
| @@ -72,7 +76,7 @@ export default { | |||||||
| 				{ | 				{ | ||||||
| 					type: 'datePicker', | 					type: 'datePicker', | ||||||
| 					label: '时间', | 					label: '时间', | ||||||
| 					dateType: 'datetime', | 					dateType: 'month', | ||||||
| 					format: 'yyyy-MM-dd', | 					format: 'yyyy-MM-dd', | ||||||
| 					valueFormat: 'yyyy-MM-dd HH:mm:ss', | 					valueFormat: 'yyyy-MM-dd HH:mm:ss', | ||||||
| 					rangeSeparator: '-', | 					rangeSeparator: '-', | ||||||
| @@ -82,7 +86,7 @@ export default { | |||||||
| 				}, | 				}, | ||||||
| 				{ | 				{ | ||||||
| 					type: 'button', | 					type: 'button', | ||||||
| 					btnName: '搜索', | 					btnName: '查询', | ||||||
| 					name: 'search', | 					name: 'search', | ||||||
| 					color: 'primary', | 					color: 'primary', | ||||||
| 				} | 				} | ||||||
| @@ -101,6 +105,8 @@ export default { | |||||||
| 			this.optionArrUrl.forEach((item, index) => { | 			this.optionArrUrl.forEach((item, index) => { | ||||||
| 				item(params).then((response) => { | 				item(params).then((response) => { | ||||||
| 					this.formConfig[index].selectOptions = response.data.list | 					this.formConfig[index].selectOptions = response.data.list | ||||||
|  |           // this.formConfig[0].defaultSelect = response.data.list[0].id | ||||||
|  |           this.$set(this.formConfig[0], 'defaultSelect', response.data.list[0].id) | ||||||
| 				}); | 				}); | ||||||
| 			}); | 			}); | ||||||
|     }, |     }, | ||||||
| @@ -112,11 +118,13 @@ export default { | |||||||
|         let arr = [ |         let arr = [ | ||||||
|           	{ |           	{ | ||||||
|               prop: 'lineName', |               prop: 'lineName', | ||||||
|           		label: '产线' |           		label: '产线', | ||||||
|  |               fixed: 'left' | ||||||
|           	}, |           	}, | ||||||
|             { |             { | ||||||
|               prop: 'sum', |               prop: 'sum', | ||||||
|               label: '合计' |               label: '合计', | ||||||
|  |               fixed: 'left' | ||||||
|             }, |             }, | ||||||
|             { |             { | ||||||
|               prop: res.data ? res.data.nameData[0].name : undefined, |               prop: res.data ? res.data.nameData[0].name : undefined, | ||||||
| @@ -220,7 +228,6 @@ export default { | |||||||
|       }); |       }); | ||||||
|     }, |     }, | ||||||
|     buttonClick(val) { |     buttonClick(val) { | ||||||
|       // console.log(val) |  | ||||||
| 			switch (val.btnName) { | 			switch (val.btnName) { | ||||||
|         case 'search': |         case 'search': | ||||||
|           this.listQuery.lineIds = val.lineIds ? val.lineIds :undefined |           this.listQuery.lineIds = val.lineIds ? val.lineIds :undefined | ||||||
|   | |||||||
							
								
								
									
										412
									
								
								src/views/core/base/equipment/components/AssetsUpload.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										412
									
								
								src/views/core/base/equipment/components/AssetsUpload.vue
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,412 @@ | |||||||
|  | <!--  | ||||||
|  |     filename: AssetsUpload.vue | ||||||
|  |     author: liubin | ||||||
|  |     date: 2023-10-12 16:40:14 | ||||||
|  |     description: 上传资料/图片 组件 | ||||||
|  | --> | ||||||
|  |  | ||||||
|  | <template> | ||||||
|  | 	<div class="assets-upload"> | ||||||
|  | 		<section class="operations"> | ||||||
|  | 			<el-button type="text" class="expand-btn" @click="expand = !expand"> | ||||||
|  | 				<i class="el-icon-folder-opened" v-if="expand"></i> | ||||||
|  | 				<i class="el-icon-folder" v-else></i> | ||||||
|  | 				展开 | ||||||
|  | 			</el-button> | ||||||
|  | 			<!-- <div class="preview-btn"> | ||||||
|  | 				<i class="el-icon-view"></i> | ||||||
|  | 				预览 | ||||||
|  | 			</div> --> | ||||||
|  | 		</section> | ||||||
|  | 		<section class="file-area"> | ||||||
|  | 			<el-upload | ||||||
|  | 				class="equipment-upload" | ||||||
|  | 				:disabled="disabled" | ||||||
|  | 				drag | ||||||
|  | 				:action="uploadUrl" | ||||||
|  | 				:headers="headers" | ||||||
|  | 				multiple | ||||||
|  | 				:show-file-list="false" | ||||||
|  | 				:before-upload="beforeUpload" | ||||||
|  | 				:on-success="handleSuccess"> | ||||||
|  | 				<i class="el-icon-upload"></i> | ||||||
|  | 				<div class="el-upload__text"> | ||||||
|  | 					<span>将文件拖到此处或</span> | ||||||
|  | 					<em>点击上传</em> | ||||||
|  | 				</div> | ||||||
|  | 				<div class="el-upload__tip" slot="tip"> | ||||||
|  | 					{{ | ||||||
|  | 						isPicMode ? '仅支持上传 .jpg .png 格式文件, 且' : '' | ||||||
|  | 					}}文件大小不超过2MB | ||||||
|  | 				</div> | ||||||
|  | 			</el-upload> | ||||||
|  | 			<!-- <div | ||||||
|  | 				class="file-list__item" | ||||||
|  | 				v-for="n in 9" | ||||||
|  | 				:key="n" | ||||||
|  | 				:style="{ | ||||||
|  | 					display: n > 4 && !expand ? 'none' : 'block', | ||||||
|  | 				}" | ||||||
|  | 				:data-name="n" | ||||||
|  | 				:class="{ 'default-icon': !isPicMode }"> | ||||||
|  | 				<i class="el-icon-delete"></i> | ||||||
|  | 			</div> --> | ||||||
|  | 			<div | ||||||
|  | 				class="file-list__item" | ||||||
|  | 				v-for="(file, index) in files" | ||||||
|  | 				:key="file.fileName" | ||||||
|  | 				:style="{ | ||||||
|  | 					display: index > 3 && !expand ? 'none' : 'block', | ||||||
|  | 					background: isPicMode | ||||||
|  | 						? `url(${file.fileUrl}) no-repeat` | ||||||
|  | 						: `url(${defaultBg}) no-repeat`, | ||||||
|  | 					backgroundSize: isPicMode ? '100% 100%' : '64px', | ||||||
|  | 					backgroundPosition: isPicMode ? '0% 0%' : 'center', | ||||||
|  | 				}" | ||||||
|  | 				:data-name="file.fileName"> | ||||||
|  | 				<el-button | ||||||
|  | 					v-if="!disabled" | ||||||
|  | 					type="text" | ||||||
|  | 					class="el-icon-delete" | ||||||
|  | 					style="padding: 0" | ||||||
|  | 					@click="(e) => handleDelete(file)" /> | ||||||
|  | 			</div> | ||||||
|  | 		</section> | ||||||
|  | 	</div> | ||||||
|  | </template> | ||||||
|  |  | ||||||
|  | <script> | ||||||
|  | import { getAccessToken } from '@/utils/auth'; | ||||||
|  | import defaultBg from '../../../../../assets/images/default-file-icon.png'; | ||||||
|  |  | ||||||
|  | function checkSize(file, message) { | ||||||
|  | 	const isLt2M = file.size / 1024 / 1024 < 2; | ||||||
|  | 	if (!isLt2M) { | ||||||
|  | 		message.error('上传文件大小不能超过 2MB!'); | ||||||
|  | 	} | ||||||
|  | 	return isLt2M; | ||||||
|  | } | ||||||
|  |  | ||||||
|  | function checkPic(file, message) { | ||||||
|  | 	const isJPG = file.type === 'image/jpeg'; | ||||||
|  | 	const isPNG = file.type === 'image/png'; | ||||||
|  | 	const isPic = isJPG || isPNG; | ||||||
|  | 	if (!isPic) { | ||||||
|  | 		message.error('上传图片只能是 JPG/PNG 格式!'); | ||||||
|  | 	} | ||||||
|  | 	return isPic; | ||||||
|  | } | ||||||
|  |  | ||||||
|  | export default { | ||||||
|  | 	name: 'AssetsUpload', | ||||||
|  | 	components: {}, | ||||||
|  | 	model: { | ||||||
|  | 		prop: 'dataSource', | ||||||
|  | 		event: 'update', | ||||||
|  | 	}, | ||||||
|  | 	props: { | ||||||
|  | 		type: { | ||||||
|  | 			type: String, | ||||||
|  | 			default: 'image', | ||||||
|  | 		}, | ||||||
|  | 		dataSource: { | ||||||
|  | 			type: Array, | ||||||
|  | 			default: () => [], | ||||||
|  | 		}, | ||||||
|  | 		equipmentId: { | ||||||
|  | 			type: String, | ||||||
|  | 			default: '', | ||||||
|  | 		}, | ||||||
|  | 		isPicMode: { | ||||||
|  | 			type: Boolean, | ||||||
|  | 			default: false, | ||||||
|  | 		}, | ||||||
|  | 		disabled: { | ||||||
|  | 			type: Boolean, | ||||||
|  | 			default: false, | ||||||
|  | 		}, | ||||||
|  | 	}, | ||||||
|  | 	emits: ['update-filelist'], | ||||||
|  | 	data() { | ||||||
|  | 		return { | ||||||
|  | 			defaultBg, | ||||||
|  | 			expand: false, | ||||||
|  | 			headers: { Authorization: 'Bearer ' + getAccessToken() }, // 设置上传的请求头部 | ||||||
|  | 			fileList: [], | ||||||
|  | 			uploadUrl: process.env.VUE_APP_BASE_API + '/admin-api/infra/file/upload', | ||||||
|  | 			files: [ | ||||||
|  | 				// 服务器返回的结构 | ||||||
|  | 				// { | ||||||
|  | 				// 	fileName: 'sf.docs', | ||||||
|  | 				// 	fileType: 'asset', | ||||||
|  | 				// 	fileUrl: | ||||||
|  | 				// 		'https://hbimg.b0.upaiyun.com/cc7475787bd08ed926b68eaf53fa1f2c5473259115e3c-gJdObd_fw658', | ||||||
|  | 				// }, | ||||||
|  | 				// { | ||||||
|  | 				// 	fileName: 'sddf.docs', | ||||||
|  | 				// 	fileType: 'asset', | ||||||
|  | 				// 	fileUrl: 'https://img0.sc115.com/wm/xqx/pic1/1501xofo4ssolji.jpg', | ||||||
|  | 				// }, | ||||||
|  | 				// { | ||||||
|  | 				// 	fileName: 'jjj.docs', | ||||||
|  | 				// 	fileType: 'asset', | ||||||
|  | 				// 	fileUrl: | ||||||
|  | 				// 		'https://www.mms591.com/www.mms591.com-photo/2013081823/1-130QR34544.jpg', | ||||||
|  | 				// }, | ||||||
|  | 				// { | ||||||
|  | 				// 	fileName: 'asdfasdf.docs', | ||||||
|  | 				// 	fileType: 'asset', | ||||||
|  | 				// 	fileUrl: | ||||||
|  | 				// 		'https://hbimg.b0.upaiyun.com/8f6bced5f2e38d3a021b2c48d5a98dfb6317e3e12c6a0-QmhJ5v_fw658', | ||||||
|  | 				// }, | ||||||
|  | 				// { | ||||||
|  | 				// 	fileName: 'asdkj.docs', | ||||||
|  | 				// 	fileType: 'asset', | ||||||
|  | 				// 	fileUrl: | ||||||
|  | 				// 		'https://www.mms591.com/www.mms591.com-photo/2013013021/1-130130212034.jpg', | ||||||
|  | 				// }, | ||||||
|  | 				// { | ||||||
|  | 				// 	fileName: 'lkasjdf.docs', | ||||||
|  | 				// 	fileType: 'asset', | ||||||
|  | 				// 	fileUrl: | ||||||
|  | 				// 		'https://www.mms591.com/www.mms591.com-photo/2013072122/1-130H1223057.jpg', | ||||||
|  | 				// }, | ||||||
|  | 				// { | ||||||
|  | 				// 	fileName: 'asdf.docs', | ||||||
|  | 				// 	fileType: 'asset', | ||||||
|  | 				// 	fileUrl: | ||||||
|  | 				// 		'https://img.1ppt.com/uploads/allimg/1212/1-1212101ZH5A2.jpg', | ||||||
|  | 				// }, | ||||||
|  | 				// { | ||||||
|  | 				// 	fileName: 'afdffff.docs', | ||||||
|  | 				// 	fileType: 'asset', | ||||||
|  | 				// 	fileUrl: | ||||||
|  | 				// 		'https://www.mms591.com/www.mms591.com-photo/2013051721/1-13051H11945.jpg', | ||||||
|  | 				// }, | ||||||
|  | 			], | ||||||
|  | 			updateTimer: null, | ||||||
|  | 		}; | ||||||
|  | 	}, | ||||||
|  | 	watch: { | ||||||
|  | 		dataSource: { | ||||||
|  | 			handler(val) { | ||||||
|  | 				this.files = JSON.parse(JSON.stringify(val)); | ||||||
|  | 			}, | ||||||
|  | 			immediate: true, | ||||||
|  | 			deep: true, | ||||||
|  | 		}, | ||||||
|  | 	}, | ||||||
|  | 	mounted() {}, | ||||||
|  | 	methods: { | ||||||
|  | 		// handle success, per file! | ||||||
|  | 		handleSuccess(response, file, fileList) { | ||||||
|  | 			this.$notify({ | ||||||
|  | 				title: '成功', | ||||||
|  | 				message: '上传成功! 点击确认保存上传结果', | ||||||
|  | 				type: 'success', | ||||||
|  | 			}); | ||||||
|  | 			if ( | ||||||
|  | 				response == null || | ||||||
|  | 				!('data' in response) || | ||||||
|  | 				response.data == null || | ||||||
|  | 				response.data.trim() == '' | ||||||
|  | 			) { | ||||||
|  | 				this.$message.error('上传出错了!'); | ||||||
|  | 				return; | ||||||
|  | 			} | ||||||
|  | 			this.files.push({ | ||||||
|  | 				fileName: file.name, | ||||||
|  | 				fileUrl: response.data, | ||||||
|  | 				fileType: this.isPicMode ? 1 : 2, | ||||||
|  | 			}); | ||||||
|  | 			// debugger; | ||||||
|  |  | ||||||
|  | 			// 延时更新 | ||||||
|  | 			if (this.updateTimer) { | ||||||
|  | 				clearTimeout(this.updateTimer); | ||||||
|  | 			} | ||||||
|  | 			this.updateTimer = setTimeout(() => { | ||||||
|  | 				console.log('[AssetsUpload] 更新上传列表'); | ||||||
|  | 				this.emitFilelist(); | ||||||
|  | 				clearTimeout(this.updateTimer); | ||||||
|  | 				this.updateTimer = null; | ||||||
|  | 			}, 500); | ||||||
|  | 		}, | ||||||
|  |  | ||||||
|  | 		emitFilelist() { | ||||||
|  | 			this.$emit('update', this.files); | ||||||
|  | 		}, | ||||||
|  |  | ||||||
|  | 		handleRemove(file, fileList) { | ||||||
|  | 			debugger; | ||||||
|  | 		}, | ||||||
|  |  | ||||||
|  | 		handleDelete(file) { | ||||||
|  | 			// fileName fileType 都可能一样,但 fileUrl 一定不一样 | ||||||
|  | 			this.files = this.files.filter((item) => item.fileUrl != file.fileUrl); | ||||||
|  | 			this.$notify({ | ||||||
|  | 				title: '成功', | ||||||
|  | 				message: '删除成功! 需点击确认保存删除结果', | ||||||
|  | 				type: 'success', | ||||||
|  | 			}); | ||||||
|  | 			this.emitFilelist(); | ||||||
|  | 		}, | ||||||
|  |  | ||||||
|  | 		beforeUpload(file) { | ||||||
|  | 			if (this.isPicMode) { | ||||||
|  | 				return checkPic(file, this.$message) && checkSize(file, this.$message); | ||||||
|  | 			} | ||||||
|  | 			return checkSize(file, this.$message); | ||||||
|  | 		}, | ||||||
|  |  | ||||||
|  | 		handleUpload() { | ||||||
|  | 			switch (this.type) { | ||||||
|  | 				case 'image': | ||||||
|  | 					break; | ||||||
|  | 				case 'asset': | ||||||
|  | 					break; | ||||||
|  | 			} | ||||||
|  | 		}, | ||||||
|  | 		updateFileList(appendFilelist) { | ||||||
|  | 			// Array | ||||||
|  | 			this.$emit('update-filelist', this.appendFilelist); | ||||||
|  | 		}, | ||||||
|  | 	}, | ||||||
|  | }; | ||||||
|  | </script> | ||||||
|  |  | ||||||
|  | <style scoped lang="scss"> | ||||||
|  | .assets-upload { | ||||||
|  | 	position: relative; | ||||||
|  | } | ||||||
|  |  | ||||||
|  | .operations { | ||||||
|  | 	position: absolute; | ||||||
|  | 	top: -36px; | ||||||
|  | 	right: 0; | ||||||
|  | 	display: flex; | ||||||
|  | 	align-items: center; | ||||||
|  | } | ||||||
|  |  | ||||||
|  | .expand-btn, | ||||||
|  | .preview-btn { | ||||||
|  | 	font-size: 14px; | ||||||
|  | 	line-height: 1.2; | ||||||
|  | 	display: inline-block; | ||||||
|  | 	padding-left: 20px; | ||||||
|  | 	cursor: pointer; | ||||||
|  | 	z-index: 1000; | ||||||
|  | } | ||||||
|  |  | ||||||
|  | .expand-btn { | ||||||
|  | 	margin-right: 12px; | ||||||
|  | } | ||||||
|  |  | ||||||
|  | .preview-btn { | ||||||
|  | 	color: #ccc; | ||||||
|  | } | ||||||
|  |  | ||||||
|  | .expand-btn, | ||||||
|  | .preview-btn:hover, | ||||||
|  | .preview-btn.active { | ||||||
|  | 	// color: #0042d0; | ||||||
|  | 	color: #0b58ff; | ||||||
|  | } | ||||||
|  |  | ||||||
|  | :deep(.equipment-upload) { | ||||||
|  | 	background: #ccc4; | ||||||
|  | 	.el-upload-dragger { | ||||||
|  | 		width: 188px; | ||||||
|  | 		height: 128px; | ||||||
|  | 	} | ||||||
|  |  | ||||||
|  | 	.el-icon-upload { | ||||||
|  | 		margin: 12px 0; | ||||||
|  | 		font-size: 48px; | ||||||
|  | 	} | ||||||
|  |  | ||||||
|  | 	.el-upload__text { | ||||||
|  | 		font-size: 12px; | ||||||
|  | 		line-height: 2px; | ||||||
|  | 		display: flex; | ||||||
|  | 		flex-direction: column; | ||||||
|  |  | ||||||
|  | 		em { | ||||||
|  | 			margin-top: 12px; | ||||||
|  | 		} | ||||||
|  | 	} | ||||||
|  |  | ||||||
|  | 	.el-upload__tip { | ||||||
|  | 		font-size: 12px; | ||||||
|  | 		line-height: 1.5; | ||||||
|  | 		color: #d1d1d1; | ||||||
|  | 		margin: 0 0 12px; | ||||||
|  | 		transform: translateY(-12px); | ||||||
|  | 		user-select: none; | ||||||
|  | 	} | ||||||
|  | } | ||||||
|  |  | ||||||
|  | .file-list { | ||||||
|  | 	padding: 12px; | ||||||
|  | 	border: 1px solid #ccc; | ||||||
|  | } | ||||||
|  |  | ||||||
|  | // custom | ||||||
|  | .file-area { | ||||||
|  | 	display: grid; | ||||||
|  | 	grid-template-columns: repeat(5, 188px); | ||||||
|  | 	grid-auto-rows: 128px; | ||||||
|  | 	gap: 24px 18px; | ||||||
|  | 	place-content: center; | ||||||
|  | } | ||||||
|  |  | ||||||
|  | .file-list__item { | ||||||
|  | 	background-color: #fff; | ||||||
|  | 	border: 1px dashed #d9d9d9; | ||||||
|  | 	border-radius: 6px; | ||||||
|  | 	-webkit-box-sizing: border-box; | ||||||
|  | 	box-sizing: border-box; | ||||||
|  | 	text-align: center; | ||||||
|  | 	cursor: pointer; | ||||||
|  | 	position: relative; | ||||||
|  | 	// overflow: hidden; | ||||||
|  |  | ||||||
|  | 	&:hover { | ||||||
|  | 		.el-icon-delete { | ||||||
|  | 			display: block; | ||||||
|  | 		} | ||||||
|  | 	} | ||||||
|  |  | ||||||
|  | 	.el-icon-delete { | ||||||
|  | 		color: #ccc; | ||||||
|  | 		position: absolute; | ||||||
|  | 		top: 8px; | ||||||
|  | 		right: 8px; | ||||||
|  | 		display: none; | ||||||
|  |  | ||||||
|  | 		&:hover { | ||||||
|  | 			color: rgb(210, 41, 41); | ||||||
|  | 		} | ||||||
|  | 	} | ||||||
|  | } | ||||||
|  |  | ||||||
|  | .file-list__item:hover { | ||||||
|  | 	border-color: #0b58ff; | ||||||
|  | } | ||||||
|  |  | ||||||
|  | .file-list__item::after { | ||||||
|  | 	content: attr(data-name); | ||||||
|  | 	position: absolute; | ||||||
|  | 	left: 0; | ||||||
|  | 	bottom: -26px; | ||||||
|  | 	font-size: 14px; | ||||||
|  | 	line-height: 2; | ||||||
|  | 	color: #616161; | ||||||
|  | } | ||||||
|  |  | ||||||
|  | .default-icon { | ||||||
|  | 	background: url(../../../../../assets/images/default-file-icon.png) no-repeat; | ||||||
|  | 	background-position: center; | ||||||
|  | 	background-size: 64px; | ||||||
|  | } | ||||||
|  | </style> | ||||||
							
								
								
									
										313
									
								
								src/views/core/base/equipment/components/DialogForm.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										313
									
								
								src/views/core/base/equipment/components/DialogForm.vue
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,313 @@ | |||||||
|  | <!--  | ||||||
|  |     filename: dialogForm.vue | ||||||
|  |     author: liubin | ||||||
|  |     date: 2023-08-15 10:32:36 | ||||||
|  |     description: 弹窗的表单组件 | ||||||
|  | --> | ||||||
|  |  | ||||||
|  | <template> | ||||||
|  | 	<el-form | ||||||
|  | 		ref="form" | ||||||
|  | 		:model="form" | ||||||
|  | 		:label-width="`${labelWidth}px`" | ||||||
|  | 		:size="size" | ||||||
|  | 		:label-position="labelPosition" | ||||||
|  | 		v-loading="formLoading"> | ||||||
|  | 		<el-row :gutter="20" v-for="(row, rindex) in rows" :key="rindex"> | ||||||
|  | 			<el-col v-for="col in row" :key="col.label" :span="24 / row.length"> | ||||||
|  | 				<el-form-item :label="col.label" :prop="col.prop" :rules="col.rules"> | ||||||
|  | 					<el-input | ||||||
|  | 						v-if="col.input" | ||||||
|  | 						v-model="form[col.prop]" | ||||||
|  | 						@change="$emit('update', form)" | ||||||
|  | 						:placeholder="`请输入${col.label}`" | ||||||
|  | 						v-bind="col.bind" /> | ||||||
|  | 					<el-input | ||||||
|  | 						v-if="col.textarea" | ||||||
|  | 						type="textarea" | ||||||
|  | 						v-model="form[col.prop]" | ||||||
|  | 						@change="$emit('update', form)" | ||||||
|  | 						:placeholder="`请输入${col.label}`" | ||||||
|  | 						v-bind="col.bind" /> | ||||||
|  | 					<el-select | ||||||
|  | 						v-if="col.select" | ||||||
|  | 						v-model="form[col.prop]" | ||||||
|  | 						:placeholder="`请选择${col.label}`" | ||||||
|  | 						@change="$emit('update', form)" | ||||||
|  | 						v-bind="col.bind"> | ||||||
|  | 						<el-option | ||||||
|  | 							v-for="opt in optionListOf[col.prop]" | ||||||
|  | 							:key="opt.value" | ||||||
|  | 							:label="opt.label" | ||||||
|  | 							:value="opt.value" /> | ||||||
|  | 					</el-select> | ||||||
|  | 					<el-date-picker | ||||||
|  | 						v-if="col.datetime" | ||||||
|  | 						v-model="form[col.prop]" | ||||||
|  | 						type="datetime" | ||||||
|  | 						:placeholder="`请选择${col.label}`" | ||||||
|  | 						value-format="timestamp" | ||||||
|  | 						v-bind="col.bind"></el-date-picker> | ||||||
|  | 					<el-upload | ||||||
|  | 						class="upload-in-dialog" | ||||||
|  | 						v-if="col.upload" | ||||||
|  | 						:file-list="uploadedFileList" | ||||||
|  | 						:action="col.url" | ||||||
|  | 						:on-success="handleUploadSuccess" | ||||||
|  | 						v-bind="col.bind"> | ||||||
|  | 						<el-button | ||||||
|  | 							size="small" | ||||||
|  | 							type="primary" | ||||||
|  | 							:disabled="col.bind?.disabled || false"> | ||||||
|  | 							点击上传 | ||||||
|  | 						</el-button> | ||||||
|  | 						<div class="el-upload__tip" slot="tip" v-if="col.uploadTips"> | ||||||
|  | 							{{ col.uploadTips || '只能上传jpg/png文件,大小不超过2MB' }} | ||||||
|  | 						</div> | ||||||
|  | 					</el-upload> | ||||||
|  | 					<el-switch | ||||||
|  | 						v-if="col.switch" | ||||||
|  | 						v-model="form[col.prop]" | ||||||
|  | 						active-color="#0b58ff" | ||||||
|  | 						inactive-color="#e1e1e1" | ||||||
|  | 						v-bind="col.bind"></el-switch> | ||||||
|  | 					<component | ||||||
|  | 						v-if="col.subcomponent" | ||||||
|  | 						:key="col.key" | ||||||
|  | 						:is="col.subcomponent" | ||||||
|  | 						v-bind="col.bind" | ||||||
|  | 						:inlineStyle="col.style"></component> | ||||||
|  | 				</el-form-item> | ||||||
|  | 			</el-col> | ||||||
|  | 		</el-row> | ||||||
|  | 	</el-form> | ||||||
|  | </template> | ||||||
|  |  | ||||||
|  | <script> | ||||||
|  | /** | ||||||
|  |  * 找到最长的label | ||||||
|  |  * @param {*} options | ||||||
|  |  */ | ||||||
|  | function findMaxLabelWidth(rows) { | ||||||
|  | 	let max = 0; | ||||||
|  | 	rows.forEach((row) => { | ||||||
|  | 		row.forEach((opt) => { | ||||||
|  | 			// debugger; | ||||||
|  | 			if (!opt.label) return 0; | ||||||
|  | 			if (opt.label.length > max) { | ||||||
|  | 				max = opt.label.length; | ||||||
|  | 			} | ||||||
|  | 		}); | ||||||
|  | 	}); | ||||||
|  | 	return max; | ||||||
|  | } | ||||||
|  |  | ||||||
|  | export default { | ||||||
|  | 	name: 'DialogForm', | ||||||
|  | 	model: { | ||||||
|  | 		prop: 'dataForm', | ||||||
|  | 		event: 'update', | ||||||
|  | 	}, | ||||||
|  | 	emits: ['update'], | ||||||
|  | 	components: {}, | ||||||
|  | 	props: { | ||||||
|  | 		rows: { | ||||||
|  | 			type: Array, | ||||||
|  | 			default: () => [], | ||||||
|  | 		}, | ||||||
|  | 		dataForm: { | ||||||
|  | 			type: Object, | ||||||
|  | 			default: () => ({}), | ||||||
|  | 		}, | ||||||
|  | 		disabled: { | ||||||
|  | 			type: Boolean, | ||||||
|  | 			default: false, | ||||||
|  | 		}, | ||||||
|  | 		labelPosition: { | ||||||
|  | 			type: String, | ||||||
|  | 			default: 'right', | ||||||
|  | 		}, | ||||||
|  | 		size: { | ||||||
|  | 			type: String, | ||||||
|  | 			default: '', | ||||||
|  | 		}, | ||||||
|  | 	}, | ||||||
|  | 	data() { | ||||||
|  | 		return { | ||||||
|  | 			formLoading: true, | ||||||
|  | 			optionListOf: {}, | ||||||
|  | 			uploadedFileList: [], | ||||||
|  | 			dataLoaded: false, | ||||||
|  | 		}; | ||||||
|  | 	}, | ||||||
|  | 	computed: { | ||||||
|  | 		labelWidth() { | ||||||
|  | 			let max = findMaxLabelWidth(this.rows); | ||||||
|  | 			// 每个汉字占20px | ||||||
|  | 			return max * 20; | ||||||
|  | 			// return max * 20 + 'px'; | ||||||
|  | 		}, | ||||||
|  | 		form: { | ||||||
|  | 			get() { | ||||||
|  | 				// if (this.dataLoaded) return this.dataForm; | ||||||
|  | 				// else return {} | ||||||
|  | 				return this.dataForm; | ||||||
|  | 			}, | ||||||
|  | 			set(val) { | ||||||
|  | 				console.log('set form', val); | ||||||
|  | 			}, | ||||||
|  | 		}, | ||||||
|  | 	}, | ||||||
|  | 	watch: { | ||||||
|  | 		rows: { | ||||||
|  | 			handler() { | ||||||
|  | 				console.log('watch triggered!'); | ||||||
|  | 				this.$nextTick(() => { | ||||||
|  | 					this.handleOptions('watch'); | ||||||
|  | 				}); | ||||||
|  | 			}, | ||||||
|  | 			deep: true, | ||||||
|  | 			immediate: false, | ||||||
|  | 		}, | ||||||
|  | 	}, | ||||||
|  | 	mounted() { | ||||||
|  | 		// 处理 options | ||||||
|  | 		this.handleOptions(); | ||||||
|  | 	}, | ||||||
|  | 	methods: { | ||||||
|  | 		/** 模拟透传 ref  */ | ||||||
|  | 		validate(cb) { | ||||||
|  | 			return this.$refs.form.validate(cb); | ||||||
|  | 		}, | ||||||
|  | 		resetFields(args) { | ||||||
|  | 			return this.$refs.form.resetFields(args); | ||||||
|  | 		}, | ||||||
|  | 		// getCode | ||||||
|  | 		async getCode(url) { | ||||||
|  | 			const response = await this.$axios(url); | ||||||
|  | 			return response.data; | ||||||
|  | 		}, | ||||||
|  | 		async handleOptions(trigger = 'monuted') { | ||||||
|  | 			console.log('[dialogForm:handleOptions]'); | ||||||
|  | 			const promiseList = []; | ||||||
|  | 			this.rows.forEach((cols) => { | ||||||
|  | 				cols.forEach((opt) => { | ||||||
|  | 					if (opt.value && !this.form[opt.prop]) { | ||||||
|  | 						// 默认值 | ||||||
|  | 						this.form[opt.prop] = opt.value; | ||||||
|  | 					} | ||||||
|  |  | ||||||
|  | 					if (opt.options) { | ||||||
|  | 						this.$set(this.optionListOf, opt.prop, opt.options); | ||||||
|  | 					} else if (opt.url) { | ||||||
|  | 						// 如果有 depends,则暂时先不获取,注册一个watcher | ||||||
|  | 						if (opt.depends) { | ||||||
|  | 							console.log('[handleOptions] setting watch'); | ||||||
|  | 							this.$watch( | ||||||
|  | 								() => this.form[opt.depends], | ||||||
|  | 								(id) => { | ||||||
|  | 									console.log('<', opt.depends, '>', 'changed', id); | ||||||
|  | 									if (id == null) return; | ||||||
|  | 									// 清空原有选项 | ||||||
|  | 									this.form[opt.prop] = null; | ||||||
|  | 									// 获取新的选项 | ||||||
|  | 									this.$axios({ | ||||||
|  | 										url: `${opt.url}?id=${id}`, | ||||||
|  | 									}).then((res) => { | ||||||
|  | 										this.$set( | ||||||
|  | 											this.optionListOf, | ||||||
|  | 											opt.prop, | ||||||
|  | 											res.data.map((item) => ({ | ||||||
|  | 												label: item[opt.labelKey ?? 'name'], | ||||||
|  | 												value: item[opt.valueKey ?? 'id'], | ||||||
|  | 											})) | ||||||
|  | 										); | ||||||
|  | 									}); | ||||||
|  | 								}, | ||||||
|  | 								{ | ||||||
|  | 									immediate: true, | ||||||
|  | 								} | ||||||
|  | 							); | ||||||
|  | 							return; | ||||||
|  | 						} | ||||||
|  | 						// 如果是下拉框,或者新增模式下的输入框,才去请求 | ||||||
|  | 						if (opt.select || (opt.input && !this.form?.id)) { | ||||||
|  | 							promiseList.push(async () => { | ||||||
|  | 								const response = await this.$axios(opt.url, { | ||||||
|  | 									method: opt.method ?? 'get', | ||||||
|  | 								}); | ||||||
|  | 								console.log('[dialogForm:handleOptions:response]', response); | ||||||
|  | 								if (opt.select) { | ||||||
|  | 									// 处理下拉框选项 | ||||||
|  | 									const list = | ||||||
|  | 										'list' in response.data | ||||||
|  | 											? response.data.list | ||||||
|  | 											: response.data; | ||||||
|  | 									this.$set( | ||||||
|  | 										this.optionListOf, | ||||||
|  | 										opt.prop, | ||||||
|  | 										list.map((item) => ({ | ||||||
|  | 											label: item[opt.labelKey ?? 'name'], | ||||||
|  | 											value: item[opt.valueKey ?? 'id'], | ||||||
|  | 										})) | ||||||
|  | 									); | ||||||
|  | 								} else if (opt.input) { | ||||||
|  | 									console.log('setting code: ', response.data); | ||||||
|  | 									// 处理输入框数据 | ||||||
|  | 									this.form[opt.prop] = response.data; | ||||||
|  | 								} | ||||||
|  | 							}); | ||||||
|  | 						} | ||||||
|  | 					} | ||||||
|  | 				}); | ||||||
|  | 			}); | ||||||
|  |  | ||||||
|  | 			console.log('[dialogForm:handleOptions] done!'); | ||||||
|  |  | ||||||
|  | 			// 如果是 watch 触发的,不需要执行进一步的请求 | ||||||
|  | 			if (trigger == 'watch') { | ||||||
|  | 				this.formLoading = false; | ||||||
|  | 				return; | ||||||
|  | 			} | ||||||
|  | 			try { | ||||||
|  | 				await Promise.all(promiseList.map((fn) => fn())); | ||||||
|  | 				this.formLoading = false; | ||||||
|  | 				this.dataLoaded = true; | ||||||
|  | 				// console.log("[dialogForm:handleOptions:optionListOf]", this.optionListOf) | ||||||
|  | 			} catch (error) { | ||||||
|  | 				console.log('[dialogForm:handleOptions:error]', error); | ||||||
|  | 				this.formLoading = false; | ||||||
|  | 			} | ||||||
|  | 			if (!promiseList.length) this.formLoading = false; | ||||||
|  | 		}, | ||||||
|  | 		// 上传成功的特殊处理 | ||||||
|  | 		beforeUpload() {}, | ||||||
|  | 		// 上传前的验证规则可通过 bind 属性传入 | ||||||
|  | 		handleUploadSuccess(response, file, fileList) { | ||||||
|  | 			console.log( | ||||||
|  | 				'[dialogForm:handleUploadSuccess]', | ||||||
|  | 				response, | ||||||
|  | 				file, | ||||||
|  | 				fileList, | ||||||
|  | 				this.form | ||||||
|  | 			); | ||||||
|  | 			// 保存原始文件名 | ||||||
|  | 			if ('fileNames' in this.form) this.form.fileNames.push(file.name); | ||||||
|  | 			// 保存完整地址 | ||||||
|  | 			if ('fileUrls' in this.form) this.form.fileUrls.push(response.data); | ||||||
|  | 			this.$modal.msgSuccess('上传成功'); | ||||||
|  | 		}, | ||||||
|  |  | ||||||
|  | 		getFileName(fileUrl) { | ||||||
|  | 			return fileUrl.split('/').pop(); | ||||||
|  | 		}, | ||||||
|  | 	}, | ||||||
|  | }; | ||||||
|  | </script> | ||||||
|  |  | ||||||
|  | <style scoped lang="scss"> | ||||||
|  | .el-date-editor, | ||||||
|  | .el-select { | ||||||
|  | 	width: 100%; | ||||||
|  | } | ||||||
|  | </style> | ||||||
| @@ -29,23 +29,28 @@ | |||||||
| 				<section v-for="(section, index) in sections" :key="section.key"> | 				<section v-for="(section, index) in sections" :key="section.key"> | ||||||
| 					<SmallTitle v-if="index != 0">{{ section.name }}</SmallTitle> | 					<SmallTitle v-if="index != 0">{{ section.name }}</SmallTitle> | ||||||
|  |  | ||||||
| 					<div class="form-part" v-if="section.key == 'base'"> | 					<div | ||||||
|  | 						class="form-part" | ||||||
|  | 						v-if="section.key == 'base'" | ||||||
|  | 						style="margin-bottom: 32px"> | ||||||
| 						<el-skeleton v-if="!showForm" animated /> | 						<el-skeleton v-if="!showForm" animated /> | ||||||
| 						<DialogForm | 						<EquipmentInfoForm | ||||||
| 							key="drawer-dialog-form" | 							key="drawer-dialog-form" | ||||||
| 							v-if="showForm" | 							v-if="showForm" | ||||||
| 							ref="form" | 							:disabled="mode.includes('detail')" | ||||||
| 							:dataForm="form" | 							:sync-filelist="syncFileListFlag" | ||||||
| 							:rows="formRows" /> | 							v-model="form" /> | ||||||
| 					</div> | 					</div> | ||||||
|  |  | ||||||
| 					<div v-if="section.key == 'attrs'" style="margin-top: 12px"> | 					<div v-if="section.key == 'attrs'" style="margin-top: 12px"> | ||||||
| 						<base-table | 						<base-table | ||||||
| 							v-loading="attrListLoading" | 							v-loading="attrListLoading" | ||||||
| 							:table-props="section.props" | 							:table-props="section.props" | ||||||
| 							:page="section.pageNo || 1" | 							:page="attrQuery?.params.pageNo || 1" | ||||||
| 							:limit="section.pageSize || 10" | 							:limit="attrQuery?.params.pageSize || 10" | ||||||
| 							:table-data="list" | 							:table-data="list" | ||||||
|  | 							:add-button-show="mode.includes('detail') ? null : '添加属性'" | ||||||
|  | 							@emitButtonClick="handleAddAttr" | ||||||
| 							@emitFun="handleEmitFun"> | 							@emitFun="handleEmitFun"> | ||||||
| 							<method-btn | 							<method-btn | ||||||
| 								v-if="section.tableBtn" | 								v-if="section.tableBtn" | ||||||
| @@ -54,27 +59,31 @@ | |||||||
| 								:method-list="tableBtn" | 								:method-list="tableBtn" | ||||||
| 								@clickBtn="handleTableBtnClick" /> | 								@clickBtn="handleTableBtnClick" /> | ||||||
| 						</base-table> | 						</base-table> | ||||||
|  |  | ||||||
|  | 						<!-- 分页组件 --> | ||||||
|  | 						<pagination | ||||||
|  | 							v-show="total > 0" | ||||||
|  | 							:total="total" | ||||||
|  | 							:page.sync="attrQuery.params.pageNo" | ||||||
|  | 							:limit.sync="attrQuery.params.pageSize" | ||||||
|  | 							@pagination="getAttrList" /> | ||||||
| 					</div> | 					</div> | ||||||
| 				</section> | 				</section> | ||||||
| 			</div> | 			</div> | ||||||
|  |  | ||||||
| 			<div class="drawer-body__footer"> | 			<div class="drawer-body__footer"> | ||||||
| 				<el-button style="margin-right: 10px" @click="handleCancel"> | 				<el-button style="" @click="handleCancel">取消</el-button> | ||||||
| 					返回 |  | ||||||
| 				</el-button> |  | ||||||
| 				<el-button v-if="mode == 'detail'" type="primary" @click="toggleEdit"> | 				<el-button v-if="mode == 'detail'" type="primary" @click="toggleEdit"> | ||||||
| 					编辑 | 					编辑 | ||||||
| 				</el-button> | 				</el-button> | ||||||
| 				<span v-else> | 				<el-button v-else type="primary" @click="handleConfirm">确定</el-button> | ||||||
| 					<el-button type="primary" @click="handleSave">保存</el-button> | 				<!-- sections的第二项必须是 属性列表  --> | ||||||
| 					<!-- sections的第二项必须是 属性列表  --> | 				<!-- <el-button | ||||||
| 					<el-button |  | ||||||
| 						v-if="sections[1].allowAdd" | 						v-if="sections[1].allowAdd" | ||||||
| 						type="primary" | 						type="primary" | ||||||
| 						@click="handleAddAttr"> | 						@click="handleAddAttr"> | ||||||
| 						添加属性 | 						添加属性 | ||||||
| 					</el-button> | 					</el-button> --> | ||||||
| 				</span> |  | ||||||
| 			</div> | 			</div> | ||||||
| 		</div> | 		</div> | ||||||
|  |  | ||||||
| @@ -99,11 +108,13 @@ | |||||||
| </template> | </template> | ||||||
|  |  | ||||||
| <script> | <script> | ||||||
| import DialogForm from '@/components/DialogForm'; | import DialogForm from './DialogForm'; | ||||||
|  | import EquipmentInfoForm from './EquipmentInfoForm.vue'; | ||||||
|  |  | ||||||
| const SmallTitle = { | const SmallTitle = { | ||||||
| 	name: 'SmallTitle', | 	name: 'SmallTitle', | ||||||
| 	props: ['size'], | 	props: ['size'], | ||||||
|  | 	components: {}, | ||||||
| 	data() { | 	data() { | ||||||
| 		return {}; | 		return {}; | ||||||
| 	}, | 	}, | ||||||
| @@ -127,12 +138,13 @@ const SmallTitle = { | |||||||
| }; | }; | ||||||
|  |  | ||||||
| export default { | export default { | ||||||
| 	components: { SmallTitle, DialogForm }, | 	components: { SmallTitle, DialogForm, EquipmentInfoForm }, | ||||||
| 	props: ['sections', 'mode', 'dataId'], // dataId 作为一个通用的存放id的字段 | 	props: ['sections', 'mode', 'dataId'], // dataId 作为一个通用的存放id的字段 | ||||||
| 	data() { | 	data() { | ||||||
| 		return { | 		return { | ||||||
| 			visible: false, | 			visible: false, | ||||||
| 			showForm: false, | 			showForm: false, | ||||||
|  | 			btnLoading: false, | ||||||
| 			total: 0, | 			total: 0, | ||||||
| 			form: {}, | 			form: {}, | ||||||
| 			list: [], | 			list: [], | ||||||
| @@ -161,10 +173,16 @@ export default { | |||||||
| 					}, | 					}, | ||||||
| 				], | 				], | ||||||
| 			], | 			], | ||||||
| 			attrQuery: null, // 属性列表的请求 | 			attrQuery: { | ||||||
|  | 				params: { | ||||||
|  | 					pageNo: 1, | ||||||
|  | 					pageSize: 10, | ||||||
|  | 				}, | ||||||
|  | 			}, // 属性列表的请求 | ||||||
| 			infoQuery: null, // 基本信息的请求 | 			infoQuery: null, // 基本信息的请求 | ||||||
| 			attrFormSubmitting: false, | 			attrFormSubmitting: false, | ||||||
| 			attrListLoading: false, | 			attrListLoading: false, | ||||||
|  | 			syncFileListFlag: null, | ||||||
| 		}; | 		}; | ||||||
| 	}, | 	}, | ||||||
| 	computed: { | 	computed: { | ||||||
| @@ -175,15 +193,19 @@ export default { | |||||||
| 						// 重置图片的位置 | 						// 重置图片的位置 | ||||||
| 						return { | 						return { | ||||||
| 							...col, | 							...col, | ||||||
|  | 							bind: { | ||||||
|  | 								...col.bind, | ||||||
|  | 							}, | ||||||
| 							style: { | 							style: { | ||||||
| 								left: 0, | 								left: 0, | ||||||
| 								right: 'unset' | 								right: 'unset', | ||||||
| 							} | 							}, | ||||||
| 						} | 						}; | ||||||
| 					} | 					} | ||||||
| 					return { | 					return { | ||||||
| 						...col, | 						...col, | ||||||
| 						bind: { | 						bind: { | ||||||
|  | 							...col.bind, | ||||||
| 							// 详情 模式下,禁用各种输入 | 							// 详情 模式下,禁用各种输入 | ||||||
| 							disabled: this.mode == 'detail', | 							disabled: this.mode == 'detail', | ||||||
| 						}, | 						}, | ||||||
| @@ -208,9 +230,52 @@ export default { | |||||||
| 				this.$axios(query).then(({ data }) => { | 				this.$axios(query).then(({ data }) => { | ||||||
| 					if (section.key == 'base') { | 					if (section.key == 'base') { | ||||||
| 						this.form = data; | 						this.form = data; | ||||||
|  | 						// this.form = { | ||||||
|  | 						// 	code: 'gj', | ||||||
|  | 						// 	name: '下片机', | ||||||
|  | 						// 	enName: 'unload', | ||||||
|  | 						// 	abbr: '', | ||||||
|  | 						// 	equipmentTypeId: 21084, | ||||||
|  | 						// 	remark: '备注', | ||||||
|  | 						// 	id: '1712367395052384257', | ||||||
|  | 						// 	createTime: 1697095176000, | ||||||
|  | 						// 	enterTime: 0, | ||||||
|  | 						// 	productionTime: 0, | ||||||
|  | 						// 	files: [ | ||||||
|  | 						// 		{ | ||||||
|  | 						// 			fileName: '测试.xlsx', | ||||||
|  | 						// 			fileUrl: 'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2022%2F0108%2F0f0c6f30j00r5cle9000sc000hs00gtc.jpg&thumbnail=660x2147483647&quality=80&type=jpg', | ||||||
|  | 						// 			fileType: 1 | ||||||
|  | 						// 		}, | ||||||
|  | 						// 		{ | ||||||
|  | 						// 			fileName: '测试2.xlsx', | ||||||
|  | 						// 			fileUrl: 'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2022%2F0415%2F2cd23619j00racb96000kc000hs00hsc.jpg&thumbnail=660x2147483647&quality=80&type=jpg', | ||||||
|  | 						// 			fileType: 1 | ||||||
|  | 						// 		}, | ||||||
|  | 						// 		{ | ||||||
|  | 						// 			fileName: '测试3.xlsx', | ||||||
|  | 						// 			fileUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F1fea91a0-d088-409e-b145-e0e61254b28b%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1700031689&t=2e0fe7d1de7f54adff3007efe133d67c', | ||||||
|  | 						// 			fileType: 1 | ||||||
|  | 						// 		}, | ||||||
|  | 						// 		{ | ||||||
|  | 						// 			fileName: '测试4.xlsx', | ||||||
|  | 						// 			fileUrl: 'https://pics5.baidu.com/feed/b7003af33a87e950cdfb4b4546eed044faf2b40d.jpeg?token=1d7484cfe4b014dd201f8c8725cab945', | ||||||
|  | 						// 			fileType: 2 | ||||||
|  | 						// 		}, | ||||||
|  | 						// 		{ | ||||||
|  | 						// 			fileName: '测试5.xlsx', | ||||||
|  | 						// 			fileUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fe3500876-9c46-4b70-8d37-4799520cdd13%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1700031689&t=4abc1df930e62730e5361a7d3765e0f2', | ||||||
|  | 						// 			fileType: 2 | ||||||
|  | 						// 		}, | ||||||
|  | 						// 	], | ||||||
|  | 						// 	tvalue: 0, | ||||||
|  | 						// 	processingTime: 0, | ||||||
|  | 						// 	manufacturer: '', | ||||||
|  | 						// 	spec: '', | ||||||
|  | 						// 	description: '描述', | ||||||
|  | 						// }; | ||||||
| 						this.showForm = true; | 						this.showForm = true; | ||||||
| 						this.infoQuery = query; | 						this.infoQuery = query; | ||||||
| 						console.log('setting form: ', this.form, data); |  | ||||||
| 					} else if (section.key == 'attrs') { | 					} else if (section.key == 'attrs') { | ||||||
| 						this.attrQuery = query; | 						this.attrQuery = query; | ||||||
| 						this.list = data.list; | 						this.list = data.list; | ||||||
| @@ -231,6 +296,24 @@ export default { | |||||||
| 					break; | 					break; | ||||||
| 			} | 			} | ||||||
| 		}, | 		}, | ||||||
|  | 		async handleConfirm() { | ||||||
|  | 			this.btnLoading = true; | ||||||
|  | 			this.syncFileListFlag = Math.random(); | ||||||
|  |  | ||||||
|  | 			this.$nextTick(async () => { | ||||||
|  | 				const { code, data } = await this.$axios({ | ||||||
|  | 					url: this.sections[0].urlUpdate, | ||||||
|  | 					method: 'put', | ||||||
|  | 					data: this.form, | ||||||
|  | 				}); | ||||||
|  | 				if (code == 0) { | ||||||
|  | 					this.$modal.msgSuccess('更新成功'); | ||||||
|  | 				} | ||||||
|  |  | ||||||
|  | 				this.btnLoading = false; | ||||||
|  | 				this.handleCancel(); | ||||||
|  | 			}); | ||||||
|  | 		}, | ||||||
|  |  | ||||||
| 		handleEmitFun(val) { | 		handleEmitFun(val) { | ||||||
| 			console.log('handleEmitFun', val); | 			console.log('handleEmitFun', val); | ||||||
| @@ -273,7 +356,7 @@ export default { | |||||||
|  |  | ||||||
| 		// 开启编辑 | 		// 开启编辑 | ||||||
| 		toggleEdit() { | 		toggleEdit() { | ||||||
| 			this.mode = 'edit'; | 			this.$emit('update-mode', 'edit'); | ||||||
| 		}, | 		}, | ||||||
|  |  | ||||||
| 		// 新增属性 | 		// 新增属性 | ||||||
| @@ -331,33 +414,44 @@ export default { | |||||||
| 		}, | 		}, | ||||||
|  |  | ||||||
| 		// 提交属性表 | 		// 提交属性表 | ||||||
| 		async submitAttrForm() { | 		submitAttrForm() { | ||||||
| 			this.$refs['attrForm'].validate((valid) => { | 			this.$refs['attrForm'].validate(async (valid) => { | ||||||
| 				if (!valid) { | 				if (!valid) { | ||||||
| 					return; | 					return; | ||||||
| 				} | 				} | ||||||
| 			}); |  | ||||||
| 			console.log('this.attrform', this.attrForm); |  | ||||||
| 			const isEdit = this.attrForm.id != null; |  | ||||||
| 			this.attrFormSubmitting = true; |  | ||||||
| 			const res = await this.$axios({ |  | ||||||
| 				url: isEdit ? this.sections[1].urlUpdate : this.sections[1].urlCreate, |  | ||||||
| 				method: isEdit ? 'put' : 'post', |  | ||||||
| 				data: this.attrForm, |  | ||||||
| 			}); |  | ||||||
|  |  | ||||||
| 			if (res.code == 0) { | 				try { | ||||||
| 				this.closeAttrForm(); | 					const isEdit = this.attrForm.id != null; | ||||||
| 				this.$message({ | 					this.attrFormSubmitting = true; | ||||||
| 					message: `${isEdit ? '更新' : '创建'}成功`, | 					const res = await this.$axios({ | ||||||
| 					type: 'success', | 						url: isEdit | ||||||
| 					duration: 1500, | 							? this.sections[1].urlUpdate | ||||||
| 					onClose: () => { | 							: this.sections[1].urlCreate, | ||||||
| 						this.getAttrList(); | 						method: isEdit ? 'put' : 'post', | ||||||
| 					}, | 						data: this.attrForm, | ||||||
| 				}); | 					}); | ||||||
| 			} |  | ||||||
| 			this.attrFormSubmitting = false; | 					if (res.code == 0) { | ||||||
|  | 						this.closeAttrForm(); | ||||||
|  | 						this.$message({ | ||||||
|  | 							message: `${isEdit ? '更新' : '创建'}成功`, | ||||||
|  | 							type: 'success', | ||||||
|  | 							duration: 1500, | ||||||
|  | 							onClose: () => { | ||||||
|  | 								this.getAttrList(); | ||||||
|  | 							}, | ||||||
|  | 						}); | ||||||
|  | 					} | ||||||
|  | 					this.attrFormSubmitting = false; | ||||||
|  | 				} catch (err) { | ||||||
|  | 					this.$message({ | ||||||
|  | 						message: err, | ||||||
|  | 						type: 'error', | ||||||
|  | 						duration: 1500, | ||||||
|  | 					}); | ||||||
|  | 					this.attrFormSubmitting = false; | ||||||
|  | 				} | ||||||
|  | 			}); | ||||||
| 		}, | 		}, | ||||||
|  |  | ||||||
| 		closeAttrForm() { | 		closeAttrForm() { | ||||||
|   | |||||||
							
								
								
									
										337
									
								
								src/views/core/base/equipment/components/EquipmentInfoForm.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										337
									
								
								src/views/core/base/equipment/components/EquipmentInfoForm.vue
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,337 @@ | |||||||
|  | <!--  | ||||||
|  |     filename: dialogForm.vue | ||||||
|  |     author: liubin | ||||||
|  |     date: 2023-08-15 10:32:36 | ||||||
|  |     description: 弹窗的表单组件 | ||||||
|  | --> | ||||||
|  |  | ||||||
|  | <template> | ||||||
|  | 	<el-form | ||||||
|  | 		class="equipment-info-form" | ||||||
|  | 		ref="form" | ||||||
|  | 		:model="form" | ||||||
|  | 		label-width="200px" | ||||||
|  | 		label-position="top" | ||||||
|  | 		v-loading="formLoading"> | ||||||
|  | 		<el-row :gutter="20"> | ||||||
|  | 			<el-col :span="8"> | ||||||
|  | 				<el-form-item | ||||||
|  | 					label="设备名称" | ||||||
|  | 					prop="name" | ||||||
|  | 					:rules="[{ required: true, message: '不能为空', trigger: 'blur' }]"> | ||||||
|  | 					<el-input | ||||||
|  | 						v-model="form.name" | ||||||
|  | 						:disabled="disabled" | ||||||
|  | 						placeholder="请输入设备名称"></el-input> | ||||||
|  | 				</el-form-item> | ||||||
|  | 			</el-col> | ||||||
|  | 			<el-col :span="8"> | ||||||
|  | 				<el-form-item label="设备编码" prop="code" :rules="[]"> | ||||||
|  | 					<el-input | ||||||
|  | 						v-model="form.code" | ||||||
|  | 						:disabled="disabled" | ||||||
|  | 						placeholder="请输入设备编码"></el-input> | ||||||
|  | 				</el-form-item> | ||||||
|  | 			</el-col> | ||||||
|  | 			<el-col :span="8"> | ||||||
|  | 				<el-form-item label="英文名称" prop="enName" :rules="[]"> | ||||||
|  | 					<el-input | ||||||
|  | 						v-model="form.enName" | ||||||
|  | 						:disabled="disabled" | ||||||
|  | 						placeholder="请输入英文名称"></el-input> | ||||||
|  | 				</el-form-item> | ||||||
|  | 			</el-col> | ||||||
|  | 		</el-row> | ||||||
|  | 		<el-row :gutter="20"> | ||||||
|  | 			<el-col :span="8"> | ||||||
|  | 				<el-form-item label="缩写" prop="abbr" :rules="[]"> | ||||||
|  | 					<el-input | ||||||
|  | 						v-model="form.abbr" | ||||||
|  | 						:disabled="disabled" | ||||||
|  | 						placeholder="请输入名称缩写"></el-input> | ||||||
|  | 				</el-form-item> | ||||||
|  | 			</el-col> | ||||||
|  | 			<el-col :span="8"> | ||||||
|  | 				<el-form-item label="设备类型" prop="equipmentTypeId" :rules="[]"> | ||||||
|  | 					<el-select | ||||||
|  | 						v-model="form.equipmentTypeId" | ||||||
|  | 						:disabled="disabled" | ||||||
|  | 						filterable | ||||||
|  | 						placeholder="请选择设备类型"> | ||||||
|  | 						<el-option | ||||||
|  | 							v-for="eqType in eqTypeList" | ||||||
|  | 							:key="eqType.id" | ||||||
|  | 							:label="eqType.name" | ||||||
|  | 							:value="eqType.id"></el-option> | ||||||
|  | 					</el-select> | ||||||
|  | 				</el-form-item> | ||||||
|  | 			</el-col> | ||||||
|  | 			<el-col :span="8"> | ||||||
|  | 				<el-form-item label="备注" prop="remark" :rules="[]"> | ||||||
|  | 					<el-input | ||||||
|  | 						v-model="form.remark" | ||||||
|  | 						:disabled="disabled" | ||||||
|  | 						placeholder="请输入备注"></el-input> | ||||||
|  | 				</el-form-item> | ||||||
|  | 			</el-col> | ||||||
|  | 		</el-row> | ||||||
|  | 		<el-row :gutter="20"> | ||||||
|  | 			<el-col :span="8"> | ||||||
|  | 				<el-form-item label="生产日期" prop="productionTime" :rules="[]"> | ||||||
|  | 					<el-date-picker | ||||||
|  | 						v-model="form.enterTime" | ||||||
|  | 						:disabled="disabled" | ||||||
|  | 						type="datetime" | ||||||
|  | 						placeholder="请选择生产日期" | ||||||
|  | 						value-format="timestamp"></el-date-picker> | ||||||
|  | 				</el-form-item> | ||||||
|  | 			</el-col> | ||||||
|  | 			<el-col :span="8"> | ||||||
|  | 				<el-form-item label="进场日期" prop="enterTime" :rules="[]"> | ||||||
|  | 					<el-date-picker | ||||||
|  | 						v-model="form.enterTime" | ||||||
|  | 						:disabled="disabled" | ||||||
|  | 						type="datetime" | ||||||
|  | 						placeholder="请选择进场日期" | ||||||
|  | 						value-format="timestamp"></el-date-picker> | ||||||
|  | 				</el-form-item> | ||||||
|  | 			</el-col> | ||||||
|  | 			<el-col :span="8"> | ||||||
|  | 				<el-form-item | ||||||
|  | 					label="设备TT值" | ||||||
|  | 					prop="tvalue" | ||||||
|  | 					:rules="[ | ||||||
|  | 						{ required: true, message: '不能为空', trigger: 'blur' }, | ||||||
|  | 						{ | ||||||
|  | 							type: 'number', | ||||||
|  | 							message: '请输入正确的数字值', | ||||||
|  | 							trigger: 'blur', | ||||||
|  | 							transform: (val) => Number(val), | ||||||
|  | 						}, | ||||||
|  | 					]"> | ||||||
|  | 					<el-input | ||||||
|  | 						v-model="form.tvalue" | ||||||
|  | 						:disabled="disabled" | ||||||
|  | 						placeholder="请输入设备TT值"></el-input> | ||||||
|  | 				</el-form-item> | ||||||
|  | 			</el-col> | ||||||
|  | 		</el-row> | ||||||
|  | 		<el-row :gutter="20"> | ||||||
|  | 			<el-col :span="8"> | ||||||
|  | 				<el-form-item | ||||||
|  | 					label="产品加工时间(s)" | ||||||
|  | 					prop="processingTime" | ||||||
|  | 					:rules="[ | ||||||
|  | 						{ required: true, message: '不能为空', trigger: 'blur' }, | ||||||
|  | 						{ | ||||||
|  | 							type: 'number', | ||||||
|  | 							message: '请输入正确的数字值', | ||||||
|  | 							trigger: 'blur', | ||||||
|  | 							transform: (val) => Number(val), | ||||||
|  | 						}, | ||||||
|  | 					]"> | ||||||
|  | 					<el-input | ||||||
|  | 						v-model="form.processingTime" | ||||||
|  | 						:disabled="disabled" | ||||||
|  | 						placeholder="请输入产品加工时间"></el-input> | ||||||
|  | 				</el-form-item> | ||||||
|  | 			</el-col> | ||||||
|  | 			<el-col :span="8"> | ||||||
|  | 				<el-form-item label="制造商" prop="manufacturer" :rules="[]"> | ||||||
|  | 					<el-input | ||||||
|  | 						v-model="form.manufacturer" | ||||||
|  | 						:disabled="disabled" | ||||||
|  | 						placeholder="请输入制造商"></el-input> | ||||||
|  | 				</el-form-item> | ||||||
|  | 			</el-col> | ||||||
|  | 			<el-col :span="8"> | ||||||
|  | 				<el-form-item label="设备规格" prop="spec" :rules="[]"> | ||||||
|  | 					<el-input | ||||||
|  | 						v-model="form.spec" | ||||||
|  | 						:disabled="disabled" | ||||||
|  | 						placeholder="请输入设备规格"></el-input> | ||||||
|  | 				</el-form-item> | ||||||
|  | 			</el-col> | ||||||
|  | 		</el-row> | ||||||
|  | 		<el-row :gutter="20"> | ||||||
|  | 			<!-- 功能描述  --> | ||||||
|  | 			<el-col> | ||||||
|  | 				<el-form-item label="功能描述" prop="description" :rules="[]"> | ||||||
|  | 					<el-input | ||||||
|  | 						type="textarea" | ||||||
|  | 						:disabled="disabled" | ||||||
|  | 						v-model="form.description" | ||||||
|  | 						placeholder="请填写功能描述"></el-input> | ||||||
|  | 				</el-form-item> | ||||||
|  | 			</el-col> | ||||||
|  | 		</el-row> | ||||||
|  | 		<el-row :gutter="20"> | ||||||
|  | 			<!-- 上传资料  --> | ||||||
|  | 			<el-col> | ||||||
|  | 				<el-form-item label="上传资料" prop="assets" :rules="[]"> | ||||||
|  | 					<AssetsUpload v-model="form.assets" :disabled="disabled" /> | ||||||
|  | 				</el-form-item> | ||||||
|  | 			</el-col> | ||||||
|  | 		</el-row> | ||||||
|  | 		<el-row :gutter="20"> | ||||||
|  | 			<!-- 上传图片  --> | ||||||
|  | 			<el-col> | ||||||
|  | 				<el-form-item label="上传图片" prop="pics" :rules="[]"> | ||||||
|  | 					<AssetsUpload | ||||||
|  | 						:is-pic-mode="true" | ||||||
|  | 						v-model="form.pics" | ||||||
|  | 						:disabled="disabled" /> | ||||||
|  | 				</el-form-item> | ||||||
|  | 			</el-col> | ||||||
|  | 		</el-row> | ||||||
|  | 	</el-form> | ||||||
|  | </template> | ||||||
|  |  | ||||||
|  | <script> | ||||||
|  | import AssetsUpload from './AssetsUpload.vue'; | ||||||
|  |  | ||||||
|  | export default { | ||||||
|  | 	name: 'EquipmentInfoForm', | ||||||
|  |  | ||||||
|  | 	model: { | ||||||
|  | 		prop: 'dataForm', | ||||||
|  | 		event: 'update', | ||||||
|  | 	}, | ||||||
|  |  | ||||||
|  | 	emits: ['update'], | ||||||
|  |  | ||||||
|  | 	components: { AssetsUpload }, | ||||||
|  |  | ||||||
|  | 	props: { | ||||||
|  | 		dataForm: { | ||||||
|  | 			type: Object, | ||||||
|  | 			default: () => ({}), | ||||||
|  | 		}, | ||||||
|  | 		disabled: { | ||||||
|  | 			type: Boolean, | ||||||
|  | 			default: false, | ||||||
|  | 		}, | ||||||
|  | 		syncFilelist: { | ||||||
|  | 			type: Number, | ||||||
|  | 			default: null, | ||||||
|  | 			required: false, | ||||||
|  | 		}, | ||||||
|  | 	}, | ||||||
|  |  | ||||||
|  | 	data() { | ||||||
|  | 		return { | ||||||
|  | 			formLoading: false, | ||||||
|  | 			form: { | ||||||
|  | 				name: '', | ||||||
|  | 				code: '', | ||||||
|  | 				enName: '', | ||||||
|  | 				abbr: '', | ||||||
|  | 				equipmentTypeId: '', | ||||||
|  | 				remark: '', | ||||||
|  | 				productionTime: '', | ||||||
|  | 				enterTime: '', | ||||||
|  | 				tvalue: '', | ||||||
|  | 				processingTime: '', | ||||||
|  | 				manufacturer: '', | ||||||
|  | 				spec: '', | ||||||
|  | 				description: '', | ||||||
|  | 				assets: [], | ||||||
|  | 				pics: [], | ||||||
|  | 			}, | ||||||
|  | 			eqTypeList: [], | ||||||
|  | 			dataLoaded: false, | ||||||
|  | 		}; | ||||||
|  | 	}, | ||||||
|  |  | ||||||
|  | 	watch: { | ||||||
|  | 		dataForm: { | ||||||
|  | 			handler(val) { | ||||||
|  | 				// debugger; | ||||||
|  | 				this.form = JSON.parse(JSON.stringify(val)); | ||||||
|  | 				this.form.assets = | ||||||
|  | 					this.form.files?.filter((item) => item.fileType == '2') || []; | ||||||
|  | 				this.form.pics = | ||||||
|  | 					this.form.files?.filter((item) => item.fileType == '1') || []; | ||||||
|  | 				delete this.form.files; | ||||||
|  | 			}, | ||||||
|  | 			immediate: true, | ||||||
|  | 			deep: true, | ||||||
|  | 		}, | ||||||
|  | 		syncFilelist: { | ||||||
|  | 			handler(val) { | ||||||
|  | 				if (val != null) { | ||||||
|  | 					this.updateForm(); | ||||||
|  | 				} | ||||||
|  | 			}, | ||||||
|  | 			immediate: true, | ||||||
|  | 		}, | ||||||
|  | 	}, | ||||||
|  |  | ||||||
|  | 	mounted() { | ||||||
|  | 		this.getEqTypeList(); | ||||||
|  | 	}, | ||||||
|  |  | ||||||
|  | 	methods: { | ||||||
|  | 		updateForm() { | ||||||
|  | 			console.log('update form ==> '); | ||||||
|  | 			this.form.files = [...this.form.assets, ...this.form.pics]; | ||||||
|  | 			delete this.form.assets; | ||||||
|  | 			delete this.form.pics; | ||||||
|  | 			this.$emit('update', this.form); | ||||||
|  | 		}, | ||||||
|  |  | ||||||
|  | 		async getEqTypeList() { | ||||||
|  | 			this.formLoading = true; | ||||||
|  | 			const { code, data } = await this.$axios( | ||||||
|  | 				'/base/equipment-type/page?pageNo=1&pageSize=100' | ||||||
|  | 			); | ||||||
|  | 			// debugger; | ||||||
|  | 			if (code == 0) { | ||||||
|  | 				this.eqTypeList = data.list; | ||||||
|  | 			} | ||||||
|  | 			this.formLoading = false; | ||||||
|  | 		}, | ||||||
|  |  | ||||||
|  | 		/** 模拟透传 ref  */ | ||||||
|  | 		validate(cb) { | ||||||
|  | 			return this.$refs.form.validate(cb); | ||||||
|  | 		}, | ||||||
|  | 		resetFields(args) { | ||||||
|  | 			return this.$refs.form.resetFields(args); | ||||||
|  | 		}, | ||||||
|  | 		// getCode | ||||||
|  | 		async getCode(url) { | ||||||
|  | 			const response = await this.$axios(url); | ||||||
|  | 			return response.data; | ||||||
|  | 		}, | ||||||
|  | 		// 上传成功的特殊处理 | ||||||
|  | 		beforeUpload() {}, | ||||||
|  | 		// 上传前的验证规则可通过 bind 属性传入 | ||||||
|  | 		handleUploadSuccess(response, file, fileList) { | ||||||
|  | 			console.log( | ||||||
|  | 				'[dialogForm:handleUploadSuccess]', | ||||||
|  | 				response, | ||||||
|  | 				file, | ||||||
|  | 				fileList, | ||||||
|  | 				this.form | ||||||
|  | 			); | ||||||
|  | 			// 保存原始文件名 | ||||||
|  | 			if ('fileNames' in this.form) this.form.fileNames.push(file.name); | ||||||
|  | 			// 保存完整地址 | ||||||
|  | 			if ('fileUrls' in this.form) this.form.fileUrls.push(response.data); | ||||||
|  | 			this.$modal.msgSuccess('上传成功'); | ||||||
|  | 		}, | ||||||
|  |  | ||||||
|  | 		getFileName(fileUrl) { | ||||||
|  | 			return fileUrl.split('/').pop(); | ||||||
|  | 		}, | ||||||
|  | 	}, | ||||||
|  | }; | ||||||
|  | </script> | ||||||
|  |  | ||||||
|  | <style scoped lang="scss"> | ||||||
|  | .el-date-editor, | ||||||
|  | .el-select { | ||||||
|  | 	width: 100%; | ||||||
|  | } | ||||||
|  | </style> | ||||||
| @@ -36,13 +36,16 @@ | |||||||
| 			:dialogVisible="open" | 			:dialogVisible="open" | ||||||
| 			@close="cancel" | 			@close="cancel" | ||||||
| 			@cancel="cancel" | 			@cancel="cancel" | ||||||
|  | 			width="60%" | ||||||
| 			@confirm="submitForm"> | 			@confirm="submitForm"> | ||||||
| 			<DialogForm | 			<DialogForm | ||||||
| 				v-if="open" | 				v-if="open" | ||||||
| 				key="index-dialog-form" | 				key="index-dialog-form" | ||||||
| 				ref="form" | 				ref="form" | ||||||
|  | 				label-position="top" | ||||||
|  | 				size="small" | ||||||
| 				:dataForm="form" | 				:dataForm="form" | ||||||
| 				:rows="rows" /> | 				:rows="computedRows" /> | ||||||
| 		</base-dialog> | 		</base-dialog> | ||||||
|  |  | ||||||
| 		<!-- 设备 详情 - 编辑 --> | 		<!-- 设备 详情 - 编辑 --> | ||||||
| @@ -50,12 +53,13 @@ | |||||||
| 			v-if="editVisible" | 			v-if="editVisible" | ||||||
| 			ref="drawer" | 			ref="drawer" | ||||||
| 			:mode="editMode" | 			:mode="editMode" | ||||||
|  | 			@update-mode="editMode = $event" | ||||||
| 			:data-id="form.id" | 			:data-id="form.id" | ||||||
| 			:sections="[ | 			:sections="[ | ||||||
| 				{ | 				{ | ||||||
| 					name: '基本信息', | 					name: '基本信息', | ||||||
| 					key: 'base', | 					key: 'base', | ||||||
| 					rows: rows, | 					rows: computedRows, | ||||||
| 					url: '/base/equipment/get', | 					url: '/base/equipment/get', | ||||||
| 					urlUpdate: '/base/equipment/update', | 					urlUpdate: '/base/equipment/update', | ||||||
| 					urlCreate: '/base/equipment/create', | 					urlCreate: '/base/equipment/create', | ||||||
| @@ -93,8 +97,8 @@ | |||||||
| 				}, | 				}, | ||||||
| 			]" | 			]" | ||||||
| 			@refreshDataList="getList" | 			@refreshDataList="getList" | ||||||
| 			@cancel="editVisible = false" | 			@cancel="cancelEdit" | ||||||
| 			@destroy="editVisible = false" /> | 			@destroy="cancelEdit" /> | ||||||
| 	</div> | 	</div> | ||||||
| </template> | </template> | ||||||
|  |  | ||||||
| @@ -115,6 +119,7 @@ import { | |||||||
| 	exportEquipmentExcel, | 	exportEquipmentExcel, | ||||||
| } from '@/api/base/equipment'; | } from '@/api/base/equipment'; | ||||||
| import Editor from '@/components/Editor'; | import Editor from '@/components/Editor'; | ||||||
|  | import AssetsUpload from './components/AssetsUpload.vue'; | ||||||
|  |  | ||||||
| export default { | export default { | ||||||
| 	name: 'Equipment', | 	name: 'Equipment', | ||||||
| @@ -155,7 +160,7 @@ export default { | |||||||
| 					filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'), | 					filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'), | ||||||
| 				}, | 				}, | ||||||
| 				{ prop: 'name', label: '设备名称' }, | 				{ prop: 'name', label: '设备名称' }, | ||||||
| 				{ width: 256, prop: 'code', label: '检测编码' }, | 				{ width: 256, prop: 'code', label: '设备编码' }, | ||||||
| 				{ prop: 'equipmentType', label: '设备类型' }, | 				{ prop: 'equipmentType', label: '设备类型' }, | ||||||
| 				{ prop: 'enName', label: '英文名称' }, | 				{ prop: 'enName', label: '英文名称' }, | ||||||
| 				{ prop: 'abbr', label: '缩写' }, | 				{ prop: 'abbr', label: '缩写' }, | ||||||
| @@ -239,8 +244,6 @@ export default { | |||||||
| 						prop: 'code', | 						prop: 'code', | ||||||
| 						url: '/base/equipment/getCode', | 						url: '/base/equipment/getCode', | ||||||
| 					}, | 					}, | ||||||
| 				], |  | ||||||
| 				[ |  | ||||||
| 					{ | 					{ | ||||||
| 						input: true, | 						input: true, | ||||||
| 						label: '英文名称', | 						label: '英文名称', | ||||||
| @@ -250,6 +253,8 @@ export default { | |||||||
| 						// 	disabled: true, // some condition, like detail mode... | 						// 	disabled: true, // some condition, like detail mode... | ||||||
| 						// } | 						// } | ||||||
| 					}, | 					}, | ||||||
|  | 				], | ||||||
|  | 				[ | ||||||
| 					{ | 					{ | ||||||
| 						input: true, | 						input: true, | ||||||
| 						label: '缩写', | 						label: '缩写', | ||||||
| @@ -259,13 +264,15 @@ export default { | |||||||
| 						// 	disabled: true, // some condition, like detail mode... | 						// 	disabled: true, // some condition, like detail mode... | ||||||
| 						// } | 						// } | ||||||
| 					}, | 					}, | ||||||
| 				], |  | ||||||
| 				[ |  | ||||||
| 					{ | 					{ | ||||||
| 						select: true, | 						select: true, | ||||||
| 						label: '设备类型', | 						label: '设备类型', | ||||||
| 						prop: 'equipmentTypeId', | 						prop: 'equipmentTypeId', | ||||||
| 						url: '/base/equipment-type/page?pageNo=1&pageSize=100', | 						url: '/base/equipment-type/page?pageNo=1&pageSize=100', | ||||||
|  | 						bind: { | ||||||
|  | 							filterable: true, | ||||||
|  | 						}, | ||||||
| 					}, | 					}, | ||||||
| 					// { | 					// { | ||||||
| 					// 	select: true, | 					// 	select: true, | ||||||
| @@ -286,8 +293,6 @@ export default { | |||||||
| 						label: '进厂日期', | 						label: '进厂日期', | ||||||
| 						prop: 'enterTime', | 						prop: 'enterTime', | ||||||
| 					}, | 					}, | ||||||
| 				], |  | ||||||
| 				[ |  | ||||||
| 					{ | 					{ | ||||||
| 						input: true, | 						input: true, | ||||||
| 						prop: 'tvalue', | 						prop: 'tvalue', | ||||||
| @@ -302,11 +307,14 @@ export default { | |||||||
| 							}, | 							}, | ||||||
| 						], | 						], | ||||||
| 					}, | 					}, | ||||||
|  | 				], | ||||||
|  | 				[ | ||||||
| 					{ | 					{ | ||||||
| 						input: true, | 						input: true, | ||||||
| 						label: '产品加工时间', | 						label: '产品加工时间(s)', | ||||||
| 						prop: 'processingTime', | 						prop: 'processingTime', | ||||||
| 						rules: [ | 						rules: [ | ||||||
|  | 							{ required: true, message: '不能为空', trigger: 'blur' }, | ||||||
| 							{ | 							{ | ||||||
| 								type: 'number', | 								type: 'number', | ||||||
| 								message: '请输入正确的数字值', | 								message: '请输入正确的数字值', | ||||||
| @@ -315,8 +323,7 @@ export default { | |||||||
| 							}, | 							}, | ||||||
| 						], | 						], | ||||||
| 					}, | 					}, | ||||||
| 				], |  | ||||||
| 				[ |  | ||||||
| 					{ | 					{ | ||||||
| 						input: true, | 						input: true, | ||||||
| 						label: '制造商', | 						label: '制造商', | ||||||
| @@ -337,40 +344,79 @@ export default { | |||||||
| 						prop: 'description', | 						prop: 'description', | ||||||
| 					}, | 					}, | ||||||
| 				], | 				], | ||||||
| 				[ | 				// [ | ||||||
| 					{ | 				// 	{ | ||||||
| 						upload: true, | 				// 		assetUpload: true, | ||||||
| 						label: '上传资料', | 				// 		label: '上传资料', | ||||||
| 						prop: 'uploadFiles', | 				// 		fieldName: 'assets', | ||||||
| 						url: process.env.VUE_APP_BASE_API + '/admin-api/infra/file/upload', // 请求地址 | 				// 		subcomponent: AssetsUpload | ||||||
| 						bind: { | 				// 	}, | ||||||
| 							headers: { Authorization: 'Bearer ' + getAccessToken() }, | 				// ], | ||||||
| 							'show-file-list': false, | 				// [ | ||||||
| 						}, | 				// 	{ | ||||||
| 					}, | 				// 		assetUpload: true, | ||||||
| 				], | 				// 		label: '上传图片', | ||||||
| 				[ | 				// 		fieldName: 'images', | ||||||
| 					{ | 				// 		subcomponent: AssetsUpload | ||||||
| 						diy: true, | 				// 	}, | ||||||
| 						key: 'eq-assets', | 				// ], | ||||||
| 						label: '设备资料', | 				// [ | ||||||
| 						prop: 'fileNames', | 				// 	{ | ||||||
| 						subcomponent: EquipmentAssets, | 				// 		upload: true, | ||||||
| 					}, | 				// 		label: '上传资料', | ||||||
| 				], | 				// 		prop: 'uploadFiles', | ||||||
| 				[ | 				// 		url: process.env.VUE_APP_BASE_API + '/admin-api/infra/file/upload', // 请求地址 | ||||||
| 					{ | 				// 		uploadFnName: 'assetsUpload', // 上传方法名 | ||||||
| 						diy: true, | 				// 		bind: { | ||||||
| 						key: 'eq-pics', | 				// 			headers: { Authorization: 'Bearer ' + getAccessToken() }, | ||||||
| 						label: '设备图片', | 				// 			'show-file-list': false, | ||||||
| 						prop: 'fileUrls', | 				// 		}, | ||||||
| 						subcomponent: EquipmentPics, | 				// 	}, | ||||||
| 						pictures: async () => { | 				// 	{ | ||||||
| 							// some async request | 				// 		diy: true, | ||||||
| 							return []; | 				// 		key: 'eq-assets', | ||||||
| 						}, | 				// 		label: '设备资料', | ||||||
| 					}, | 				// 		prop: 'fileNames', | ||||||
| 				], | 				// 		subcomponent: EquipmentAssets, | ||||||
|  | 				// 	}, | ||||||
|  | 				// ], | ||||||
|  | 				// [ | ||||||
|  | 				// { | ||||||
|  | 				// 		upload: true, | ||||||
|  | 				// 		label: '上传图片', | ||||||
|  | 				// 		prop: 'uploadImages', | ||||||
|  | 				// 		url: process.env.VUE_APP_BASE_API + '/admin-api/infra/file/upload', // 请求地址 | ||||||
|  | 				// 		uploadFnName: 'imagesUpload', // 上传方法名 | ||||||
|  | 				// 		bind: { | ||||||
|  | 				// 			headers: { Authorization: 'Bearer ' + getAccessToken() }, | ||||||
|  | 				// 			'show-file-list': false, | ||||||
|  | 				// 		}, | ||||||
|  | 				// 	}, | ||||||
|  | 				// 	{ | ||||||
|  | 				// 		diy: true, | ||||||
|  | 				// 		key: 'eq-pics', | ||||||
|  | 				// 		label: '设备图片', | ||||||
|  | 				// 		prop: 'fileUrls', | ||||||
|  | 				// 		subcomponent: EquipmentPics, | ||||||
|  | 				// 		pictures: async () => { | ||||||
|  | 				// 			// some async request | ||||||
|  | 				// 			return []; | ||||||
|  | 				// 		}, | ||||||
|  | 				// 	}, | ||||||
|  | 				// ], | ||||||
|  | 				// [ | ||||||
|  | 				// 	{ | ||||||
|  | 				// 		diy: true, | ||||||
|  | 				// 		key: 'eq-pics', | ||||||
|  | 				// 		label: '设备图片', | ||||||
|  | 				// 		prop: 'fileUrls', | ||||||
|  | 				// 		subcomponent: EquipmentPics, | ||||||
|  | 				// 		pictures: async () => { | ||||||
|  | 				// 			// some async request | ||||||
|  | 				// 			return []; | ||||||
|  | 				// 		}, | ||||||
|  | 				// 	}, | ||||||
|  | 				// ], | ||||||
| 			], | 			], | ||||||
| 			editVisible: false, | 			editVisible: false, | ||||||
| 			editMode: 'edit', // 'edit', 'detail' | 			editMode: 'edit', // 'edit', 'detail' | ||||||
| @@ -399,11 +445,49 @@ export default { | |||||||
| 			form: { | 			form: { | ||||||
| 				id: null, | 				id: null, | ||||||
| 			}, | 			}, | ||||||
|  | 			showUploadComponents: false, // 是否显示上传组件 | ||||||
| 		}; | 		}; | ||||||
| 	}, | 	}, | ||||||
| 	created() { | 	created() { | ||||||
| 		this.getList(); | 		this.getList(); | ||||||
| 	}, | 	}, | ||||||
|  | 	computed: { | ||||||
|  | 		computedRows() { | ||||||
|  | 			return this.showUploadComponents | ||||||
|  | 				? [ | ||||||
|  | 						...this.rows, | ||||||
|  | 						[ | ||||||
|  | 							{ | ||||||
|  | 								assetUpload: true, | ||||||
|  | 								key: 'eq-assets', // 用于区分不同的上传组件 | ||||||
|  | 								label: '上传资料', | ||||||
|  | 								fieldName: 'assets', | ||||||
|  | 								subcomponent: AssetsUpload, | ||||||
|  | 								prop: 'uploadedAssets', | ||||||
|  | 								default: [], | ||||||
|  | 								bind: { | ||||||
|  | 									'is-pic-mode': false, | ||||||
|  | 								}, | ||||||
|  | 							}, | ||||||
|  | 						], | ||||||
|  | 						[ | ||||||
|  | 							{ | ||||||
|  | 								assetUpload: true, | ||||||
|  | 								key: 'eq-pics', // 用于区分不同的上传组件 | ||||||
|  | 								label: '上传图片', | ||||||
|  | 								fieldName: 'images', | ||||||
|  | 								subcomponent: AssetsUpload, | ||||||
|  | 								// prop: '', | ||||||
|  | 								// default: [], | ||||||
|  | 								bind: { | ||||||
|  | 									'is-pic-mode': true, | ||||||
|  | 								}, | ||||||
|  | 							}, | ||||||
|  | 						], | ||||||
|  | 				  ] | ||||||
|  | 				: this.rows; | ||||||
|  | 		}, | ||||||
|  | 	}, | ||||||
| 	methods: { | 	methods: { | ||||||
| 		/** 查询列表 */ | 		/** 查询列表 */ | ||||||
| 		getList() { | 		getList() { | ||||||
| @@ -420,6 +504,10 @@ export default { | |||||||
| 			this.open = false; | 			this.open = false; | ||||||
| 			this.reset(); | 			this.reset(); | ||||||
| 		}, | 		}, | ||||||
|  | 		cancelEdit() { | ||||||
|  | 			this.showUploadComponents = false; | ||||||
|  | 			this.editVisible = false; | ||||||
|  | 		}, | ||||||
| 		/** 表单重置 */ | 		/** 表单重置 */ | ||||||
| 		reset() { | 		reset() { | ||||||
| 			this.form = { | 			this.form = { | ||||||
| @@ -445,11 +533,13 @@ export default { | |||||||
| 		handleAdd() { | 		handleAdd() { | ||||||
| 			this.reset(); | 			this.reset(); | ||||||
| 			this.open = true; | 			this.open = true; | ||||||
|  | 			this.showUploadComponents = false; | ||||||
| 			this.title = '添加设备'; | 			this.title = '添加设备'; | ||||||
| 		}, | 		}, | ||||||
| 		/** 修改按钮操作 */ | 		/** 修改按钮操作 */ | ||||||
| 		handleUpdate(row) { | 		handleUpdate(row) { | ||||||
| 			this.reset(); | 			this.reset(); | ||||||
|  | 			this.showUploadComponents = true; | ||||||
| 			const id = row.id; | 			const id = row.id; | ||||||
| 			getEquipment(id).then((response) => { | 			getEquipment(id).then((response) => { | ||||||
| 				this.form = response.data; | 				this.form = response.data; | ||||||
| @@ -516,6 +606,7 @@ export default { | |||||||
| 		viewDetail(id) { | 		viewDetail(id) { | ||||||
| 			this.reset(); | 			this.reset(); | ||||||
| 			this.editMode = 'detail'; | 			this.editMode = 'detail'; | ||||||
|  | 			this.showUploadComponents = true; | ||||||
| 			this.form.id = id; | 			this.form.id = id; | ||||||
| 			this.editVisible = true; | 			this.editVisible = true; | ||||||
| 			this.$nextTick(() => { | 			this.$nextTick(() => { | ||||||
| @@ -524,11 +615,11 @@ export default { | |||||||
| 		}, | 		}, | ||||||
| 		// overwrite basicPageMixin 里的 处理表格按钮 方法 | 		// overwrite basicPageMixin 里的 处理表格按钮 方法 | ||||||
| 		handleTableBtnClick({ data, type }) { | 		handleTableBtnClick({ data, type }) { | ||||||
| 			console.log('[handleTableBtnClick]', data, type); |  | ||||||
| 			switch (type) { | 			switch (type) { | ||||||
| 				case 'edit': | 				case 'edit': | ||||||
| 					this.reset(); | 					this.reset(); | ||||||
| 					this.editMode = 'edit'; | 					this.editMode = 'edit'; | ||||||
|  | 					this.showUploadComponents = true; | ||||||
| 					this.form.id = data.id; | 					this.form.id = data.id; | ||||||
| 					this.editVisible = true; | 					this.editVisible = true; | ||||||
| 					this.$nextTick(() => { | 					this.$nextTick(() => { | ||||||
|   | |||||||
| @@ -37,7 +37,7 @@ | |||||||
| 			@close="cancel" | 			@close="cancel" | ||||||
| 			@cancel="cancel" | 			@cancel="cancel" | ||||||
| 			@confirm="submitForm"> | 			@confirm="submitForm"> | ||||||
| 			<DialogForm v-if="open" ref="form" :dataForm="form" :rows="rows" /> | 			<DialogForm v-if="open" ref="form" v-model="form" :rows="rows" /> | ||||||
| 		</base-dialog> | 		</base-dialog> | ||||||
| 	</div> | 	</div> | ||||||
| </template> | </template> | ||||||
| @@ -55,7 +55,7 @@ import { | |||||||
| 	exportEquipmentTypeExcel, | 	exportEquipmentTypeExcel, | ||||||
| } from '@/api/base/equipmentType'; | } from '@/api/base/equipmentType'; | ||||||
|  |  | ||||||
| import { getAccessToken } from '@/utils/auth'; | // import { getAccessToken } from '@/utils/auth'; | ||||||
|  |  | ||||||
| export default { | export default { | ||||||
| 	name: 'EquipmentType', | 	name: 'EquipmentType', | ||||||
| @@ -86,9 +86,9 @@ export default { | |||||||
| 					width: 180, | 					width: 180, | ||||||
| 					filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'), | 					filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'), | ||||||
| 				}, | 				}, | ||||||
| 				{ prop: 'name', label: '设备类型名称',  }, | 				{ prop: 'name', label: '设备类型名称' }, | ||||||
| 				{ prop: 'code', label: '检测类型编码',  }, | 				{ prop: 'code', label: '检测类型编码' }, | ||||||
| 				{ prop: 'remark', label: '备注',  }, | 				{ prop: 'remark', label: '备注' }, | ||||||
| 			], | 			], | ||||||
| 			searchBarFormConfig: [ | 			searchBarFormConfig: [ | ||||||
| 				{ | 				{ | ||||||
| @@ -149,15 +149,13 @@ export default { | |||||||
| 						prop: 'parentId', | 						prop: 'parentId', | ||||||
| 						url: '/base/equipment-type/page?pageNo=1&pageSize=100', | 						url: '/base/equipment-type/page?pageNo=1&pageSize=100', | ||||||
| 					}, | 					}, | ||||||
|  | 					{}, | ||||||
|  | 				], | ||||||
|  | 				[ | ||||||
| 					{ | 					{ | ||||||
| 						upload: true, | 						upload: true, | ||||||
| 						label: '上传资料', | 						label: '上传资料', | ||||||
| 						prop: 'uploadFiles', | 						prop: 'files', | ||||||
| 						url: process.env.VUE_APP_BASE_API + '/admin-api/infra/file/upload', // 请求地址 |  | ||||||
| 						bind: { |  | ||||||
| 							headers: { Authorization: 'Bearer ' + getAccessToken() }, |  | ||||||
| 							'show-file-list': false, |  | ||||||
| 						}, |  | ||||||
| 					}, | 					}, | ||||||
| 				], | 				], | ||||||
| 				[{ input: true, label: '备注', prop: 'remark' }], | 				[{ input: true, label: '备注', prop: 'remark' }], | ||||||
| @@ -236,6 +234,25 @@ export default { | |||||||
| 			const id = row.id; | 			const id = row.id; | ||||||
| 			getEquipmentType(id).then((response) => { | 			getEquipmentType(id).then((response) => { | ||||||
| 				this.form = response.data; | 				this.form = response.data; | ||||||
|  | 				// this.form = { | ||||||
|  | 				// 	code: 'SBLX20230925184444000041', | ||||||
|  | 				// 	name: '测试131', | ||||||
|  | 				// 	remark: '测试可删除', | ||||||
|  | 				// 	id: '1706258479729336322', | ||||||
|  | 				// 	files: [ | ||||||
|  | 				// 		{ fileName: '1.png', fileUrl: '', fileType: 2 }, | ||||||
|  | 				// 		{ fileName: '1.asdfaslkjfkasdf.png', fileUrl: '', fileType: 2 }, | ||||||
|  | 				// 		{ fileName: '2.txt', fileUrl: '', fileType: 2 }, | ||||||
|  | 				// 		{ fileName: '1.rar', fileUrl: '', fileType: 2 }, | ||||||
|  | 				// 		{ fileName: '1.kkk', fileUrl: '', fileType: 2 }, | ||||||
|  | 				// 		{ fileName: 'test.file', fileUrl: '', fileType: 2 }, | ||||||
|  | 				// 		{ fileName: '222', fileUrl: '', fileType: 2 }, | ||||||
|  | 				// 		{ fileName: 'g', fileUrl: '', fileType: 2 }, | ||||||
|  | 				// 	], | ||||||
|  | 				// 	createTime: 1695638697000, | ||||||
|  | 				// 	parentId: '1701869972319584257', | ||||||
|  | 				// }; | ||||||
|  | 				// debugger; | ||||||
| 				this.open = true; | 				this.open = true; | ||||||
| 				this.title = '修改设备类型'; | 				this.title = '修改设备类型'; | ||||||
| 			}); | 			}); | ||||||
| @@ -267,7 +284,7 @@ export default { | |||||||
| 		handleDelete(row) { | 		handleDelete(row) { | ||||||
| 			const id = row.id; | 			const id = row.id; | ||||||
| 			this.$modal | 			this.$modal | ||||||
| 				.confirm('是否确认删除设备类型编号为"' + id + '"的数据项?') | 				.confirm('是否确认删除设备类型"' + row.name + '"?') | ||||||
| 				.then(function () { | 				.then(function () { | ||||||
| 					return deleteEquipmentType(id); | 					return deleteEquipmentType(id); | ||||||
| 				}) | 				}) | ||||||
|   | |||||||
| @@ -1,8 +1,8 @@ | |||||||
| <!-- | <!-- | ||||||
|  * @Author: zwq |  * @Author: zwq | ||||||
|  * @Date: 2021-11-18 14:16:25 |  * @Date: 2021-11-18 14:16:25 | ||||||
|  * @LastEditors: zwq |  * @LastEditors: DY | ||||||
|  * @LastEditTime: 2023-08-01 16:59:06 |  * @LastEditTime: 2023-10-16 11:16:48 | ||||||
|  * @Description: |  * @Description: | ||||||
| --> | --> | ||||||
| <template> | <template> | ||||||
| @@ -12,21 +12,30 @@ | |||||||
| 		ref="dataForm" | 		ref="dataForm" | ||||||
| 		@keyup.enter.native="dataFormSubmit()" | 		@keyup.enter.native="dataFormSubmit()" | ||||||
| 		label-width="80px"> | 		label-width="80px"> | ||||||
| 		<el-form-item label="工厂编码" prop="code"> | 		<el-row :gutter="20"> | ||||||
| 			<el-input | 			<el-col :span="12"> | ||||||
| 				v-model="dataForm.code" | 				<el-form-item label="工厂编码" prop="code"> | ||||||
| 				clearable | 					<el-input | ||||||
| 				placeholder="请输入工厂编码" /> | 						v-model="dataForm.code" | ||||||
| 		</el-form-item> | 						clearable | ||||||
| 		<el-form-item label="工厂名称" prop="name"> | 						placeholder="请输入工厂编码" /> | ||||||
| 			<el-input | 				</el-form-item> | ||||||
| 				v-model="dataForm.name" | 			</el-col> | ||||||
| 				clearable | 			<el-col :span="12"> | ||||||
| 				placeholder="请输入工厂名称" /> | 				<el-form-item label="工厂名称" prop="name"> | ||||||
| 		</el-form-item> | 					<el-input | ||||||
| 		<el-form-item label="地址" prop="address"> | 						v-model="dataForm.name" | ||||||
| 			<el-input v-model="dataForm.address" clearable placeholder="请输入地址" /> | 						clearable | ||||||
| 		</el-form-item> | 						placeholder="请输入工厂名称" /> | ||||||
|  | 				</el-form-item> | ||||||
|  | 			</el-col> | ||||||
|  | 		</el-row> | ||||||
|  | 		<el-row :gutter="20"> | ||||||
|  | 			<el-col :span="12"> | ||||||
|  | 				<el-form-item label="地址" prop="address"> | ||||||
|  | 					<el-input v-model="dataForm.address" clearable placeholder="请输入地址" /> | ||||||
|  | 				</el-form-item> | ||||||
|  | 			</el-col> | ||||||
| 		<!-- <el-form-item label="启用状态" prop="enabled"> | 		<!-- <el-form-item label="启用状态" prop="enabled"> | ||||||
| 			<el-select | 			<el-select | ||||||
| 				v-model="dataForm.enabled" | 				v-model="dataForm.enabled" | ||||||
| @@ -38,9 +47,12 @@ | |||||||
| 					:value="dict.value" /> | 					:value="dict.value" /> | ||||||
| 			</el-select> | 			</el-select> | ||||||
| 		</el-form-item> --> | 		</el-form-item> --> | ||||||
| 		<el-form-item label="备注" prop="remark"> | 			<el-col :span="12"> | ||||||
| 			<el-input v-model="dataForm.remark" clearable placeholder="请输入备注" /> | 				<el-form-item label="备注" prop="remark"> | ||||||
| 		</el-form-item> | 					<el-input v-model="dataForm.remark" clearable placeholder="请输入备注" /> | ||||||
|  | 				</el-form-item> | ||||||
|  | 			</el-col> | ||||||
|  | 		</el-row> | ||||||
| 	</el-form> | 	</el-form> | ||||||
| </template> | </template> | ||||||
|  |  | ||||||
|   | |||||||
| @@ -29,7 +29,7 @@ | |||||||
| 			@cancel="handleCancel" | 			@cancel="handleCancel" | ||||||
| 			@confirm="handleConfirm" | 			@confirm="handleConfirm" | ||||||
| 			:before-close="handleCancel" | 			:before-close="handleCancel" | ||||||
| 			width="70%"> | 			width="50%"> | ||||||
| 			<add-or-update | 			<add-or-update | ||||||
| 				ref="addOrUpdate" | 				ref="addOrUpdate" | ||||||
| 				@refreshDataList="successSubmit"></add-or-update> | 				@refreshDataList="successSubmit"></add-or-update> | ||||||
| @@ -51,7 +51,7 @@ const tableProps = [ | |||||||
| 	{ | 	{ | ||||||
| 		prop: 'code', | 		prop: 'code', | ||||||
| 		label: '工厂编码' | 		label: '工厂编码' | ||||||
| 	}, | 	},																																																																						 | ||||||
| 	{ | 	{ | ||||||
| 		prop: 'name', | 		prop: 'name', | ||||||
| 		label: '工厂名称' | 		label: '工厂名称' | ||||||
|   | |||||||
| @@ -2,15 +2,14 @@ | |||||||
|  * @Author: zwq |  * @Author: zwq | ||||||
|  * @Date: 2023-08-02 15:12:42 |  * @Date: 2023-08-02 15:12:42 | ||||||
|  * @LastEditors: DY |  * @LastEditors: DY | ||||||
|  * @LastEditTime: 2023-10-10 16:49:03 |  * @LastEditTime: 2023-10-13 16:35:03 | ||||||
|  * @Description: |  * @Description: | ||||||
| --> | --> | ||||||
| <template> | <template> | ||||||
| 	<div class="app-container"> | 	<div class="app-container"> | ||||||
| 		<search-bar | 		<search-bar | ||||||
| 			:formConfigs="formConfig" | 			:formConfigs="[{ label: '产线在制产品', type: 'title' }]" | ||||||
| 			ref="searchBarForm" | 			ref="searchBarForm" /> | ||||||
| 			@headBtnClick="buttonClick" /> |  | ||||||
| 		<base-table | 		<base-table | ||||||
| 			v-loading="dataListLoading" | 			v-loading="dataListLoading" | ||||||
| 			:table-props="tableProps" | 			:table-props="tableProps" | ||||||
| @@ -36,20 +35,17 @@ import { getProductPage } from '@/api/core/base/product'; | |||||||
| const tableProps = [ | const tableProps = [ | ||||||
| 	{ | 	{ | ||||||
| 		prop: 'lineName', | 		prop: 'lineName', | ||||||
| 		label: '产线', | 		label: '产线' | ||||||
| 		align: 'center', |  | ||||||
| 	}, | 	}, | ||||||
| 	{ | 	{ | ||||||
| 		prop: 'productName', | 		prop: 'productName', | ||||||
| 		label: '在制产品', | 		label: '在制产品', | ||||||
| 		align: 'center', |  | ||||||
| 		list: [], | 		list: [], | ||||||
| 		subcomponent: selectProduct, | 		subcomponent: selectProduct, | ||||||
| 	}, | 	}, | ||||||
| 	{ | 	{ | ||||||
| 		prop: 'recordTime', | 		prop: 'recordTime', | ||||||
| 		label: '开始时间', | 		label: '开始时间', | ||||||
| 		align: 'center', |  | ||||||
| 		filter: parseTime, | 		filter: parseTime, | ||||||
| 	}, | 	}, | ||||||
| ]; | ]; | ||||||
| @@ -63,14 +59,14 @@ export default { | |||||||
| 			}, | 			}, | ||||||
| 			tableProps, | 			tableProps, | ||||||
| 			tableData: [], | 			tableData: [], | ||||||
| 			formConfig: [ | 			// formConfig: [ | ||||||
| 				{ | 			// 	{ | ||||||
| 					type: 'button', | 			// 		type: 'button', | ||||||
| 					btnName: '同步', | 			// 		btnName: '同步', | ||||||
| 					name: 'search', | 			// 		name: 'search', | ||||||
| 					color: 'primary', | 			// 		color: 'primary', | ||||||
| 				}, | 			// 	}, | ||||||
| 			], | 			// ], | ||||||
| 		}; | 		}; | ||||||
| 	}, | 	}, | ||||||
| 	components: {}, | 	components: {}, | ||||||
|   | |||||||
| @@ -2,12 +2,11 @@ | |||||||
|  * @Author: zwq |  * @Author: zwq | ||||||
|  * @Date: 2023-08-03 14:09:18 |  * @Date: 2023-08-03 14:09:18 | ||||||
|  * @LastEditors: DY |  * @LastEditors: DY | ||||||
|  * @LastEditTime: 2023-10-10 16:54:09 |  * @LastEditTime: 2023-10-13 16:47:25 | ||||||
|  * @Description: |  * @Description: | ||||||
| --> | --> | ||||||
| <template> | <template> | ||||||
| 	<div class="tableInner"> | 	<div class="tableInner"> | ||||||
| 		<el-input readonly v-model="list.productName" style="width: 50%;" ></el-input> |  | ||||||
| 		<el-popover | 		<el-popover | ||||||
|     placement="top" |     placement="top" | ||||||
|     title="切换在制产品" |     title="切换在制产品" | ||||||
| @@ -28,8 +27,11 @@ | |||||||
| 					确定 | 					确定 | ||||||
| 				</el-button> | 				</el-button> | ||||||
| 			</div> | 			</div> | ||||||
| 			<el-button type="text" slot="reference">切换</el-button> | 			<el-button type="text" slot="reference"> | ||||||
|  | 				<svg-icon icon-class="changelogo"/> | ||||||
|  | 			</el-button> | ||||||
| 		</el-popover> | 		</el-popover> | ||||||
|  | 		<el-input readonly v-model="list.productName" style="width: 50%;margin-left: 5px" ></el-input> | ||||||
| 	</div> | 	</div> | ||||||
| </template> | </template> | ||||||
| <script> | <script> | ||||||
| @@ -61,6 +63,7 @@ export default { | |||||||
| 			switchLineBindProduct(data).then((response) => { | 			switchLineBindProduct(data).then((response) => { | ||||||
| 				this.$modal.msgSuccess('修改成功'); | 				this.$modal.msgSuccess('修改成功'); | ||||||
| 				this.visible = false; | 				this.visible = false; | ||||||
|  | 				this.list.productName = this.list.string.split('+')[1] | ||||||
| 				this.$emit('emitData'); | 				this.$emit('emitData'); | ||||||
| 			}); | 			}); | ||||||
| 		}, | 		}, | ||||||
|   | |||||||
| @@ -28,24 +28,20 @@ import { getProductPage } from '@/api/core/base/product'; | |||||||
| const tableProps = [ | const tableProps = [ | ||||||
| 	{ | 	{ | ||||||
| 		prop: 'productionLineName', | 		prop: 'productionLineName', | ||||||
| 		label: '产线', | 		label: '产线' | ||||||
| 		align: 'center', |  | ||||||
| 	}, | 	}, | ||||||
| 	{ | 	{ | ||||||
| 		prop: 'productName', | 		prop: 'productName', | ||||||
| 		label: '在制产品', | 		label: '在制产品' | ||||||
| 		align: 'center', |  | ||||||
| 	}, | 	}, | ||||||
| 	{ | 	{ | ||||||
| 		prop: 'startTime', | 		prop: 'startTime', | ||||||
| 		label: '开始时间', | 		label: '开始时间', | ||||||
| 		align: 'center', |  | ||||||
| 		filter: parseTime, | 		filter: parseTime, | ||||||
| 	}, | 	}, | ||||||
| 	{ | 	{ | ||||||
| 		prop: 'endTime', | 		prop: 'endTime', | ||||||
| 		label: '结束时间', | 		label: '结束时间', | ||||||
| 		align: 'center', |  | ||||||
| 		filter: parseTime, | 		filter: parseTime, | ||||||
| 	}, | 	}, | ||||||
| ]; | ]; | ||||||
| @@ -86,7 +82,8 @@ export default { | |||||||
| 					rangeSeparator: '-', | 					rangeSeparator: '-', | ||||||
| 					startPlaceholder: '开始时间', | 					startPlaceholder: '开始时间', | ||||||
| 					endPlaceholder: '结束时间', | 					endPlaceholder: '结束时间', | ||||||
| 					param: 'createTime', | 					param: 'startTime', | ||||||
|  | 					valueFormat: 'timestamp' | ||||||
| 				}, | 				}, | ||||||
| 				{ | 				{ | ||||||
| 					type: 'button', | 					type: 'button', | ||||||
| @@ -126,7 +123,7 @@ export default { | |||||||
| 					this.listQuery.pageSize = 10; | 					this.listQuery.pageSize = 10; | ||||||
| 					this.listQuery.productionLineId = val.productionLineId; | 					this.listQuery.productionLineId = val.productionLineId; | ||||||
| 					this.listQuery.productId = val.productId; | 					this.listQuery.productId = val.productId; | ||||||
| 					this.listQuery.createTime = val.createTime; | 					this.listQuery.startTime = val.startTime; | ||||||
| 					this.getDataList(); | 					this.getDataList(); | ||||||
| 					break; | 					break; | ||||||
| 				case 'reset': | 				case 'reset': | ||||||
|   | |||||||
| @@ -43,7 +43,7 @@ | |||||||
| 							<el-form-item label="产品类型" prop="typeDictValue"> | 							<el-form-item label="产品类型" prop="typeDictValue"> | ||||||
| 								<el-select | 								<el-select | ||||||
| 									v-model="dataForm.typeDictValue" | 									v-model="dataForm.typeDictValue" | ||||||
|                   style="width: 100%" | 									style="width: 100%" | ||||||
| 									:disabled="isdetail" | 									:disabled="isdetail" | ||||||
| 									placeholder="请选择产品类型"> | 									placeholder="请选择产品类型"> | ||||||
| 									<el-option | 									<el-option | ||||||
| @@ -58,7 +58,7 @@ | |||||||
| 							<el-form-item label="单位" prop="unitDictValue"> | 							<el-form-item label="单位" prop="unitDictValue"> | ||||||
| 								<el-select | 								<el-select | ||||||
| 									v-model="dataForm.unitDictValue" | 									v-model="dataForm.unitDictValue" | ||||||
|                   style="width: 100%" | 									style="width: 100%" | ||||||
| 									:disabled="isdetail" | 									:disabled="isdetail" | ||||||
| 									placeholder="请选择单位"> | 									placeholder="请选择单位"> | ||||||
| 									<el-option | 									<el-option | ||||||
| @@ -83,8 +83,8 @@ | |||||||
| 							<el-form-item label="单位平方数" prop="area"> | 							<el-form-item label="单位平方数" prop="area"> | ||||||
| 								<el-input | 								<el-input | ||||||
| 									:disabled="isdetail" | 									:disabled="isdetail" | ||||||
|                   v-model="dataForm.area" | 									v-model="dataForm.area" | ||||||
|                   placeholder="请输入单位平方数" /> | 									placeholder="请输入单位平方数" /> | ||||||
| 							</el-form-item> | 							</el-form-item> | ||||||
| 						</el-col> | 						</el-col> | ||||||
| 					</el-row> | 					</el-row> | ||||||
| @@ -111,6 +111,8 @@ | |||||||
| 						:table-props="tableProps" | 						:table-props="tableProps" | ||||||
| 						:page="listQuery.pageNo" | 						:page="listQuery.pageNo" | ||||||
| 						:limit="listQuery.pageSize" | 						:limit="listQuery.pageSize" | ||||||
|  | 						:add-button-show="isdetail ? null : '添加属性'" | ||||||
|  | 						@emitButtonClick="addNew()" | ||||||
| 						:table-data="productAttributeList"> | 						:table-data="productAttributeList"> | ||||||
| 						<method-btn | 						<method-btn | ||||||
| 							v-if="!isdetail" | 							v-if="!isdetail" | ||||||
| @@ -123,15 +125,15 @@ | |||||||
| 					<pagination | 					<pagination | ||||||
| 						v-show="listQuery.total > 0" | 						v-show="listQuery.total > 0" | ||||||
| 						:total="listQuery.total" | 						:total="listQuery.total" | ||||||
| 						:page.sync="listQuery.current" | 						:page.sync="listQuery.pageNo" | ||||||
| 						:limit.sync="listQuery.size" | 						:limit.sync="listQuery.pageSize" | ||||||
| 						:page-sizes="[5, 10, 15]" | 						:page-sizes="[5, 10, 15]" | ||||||
| 						@pagination="getList" /> | 						@pagination="getList" /> | ||||||
| 				</div> | 				</div> | ||||||
| 			</div> | 			</div> | ||||||
| 		</div> | 		</div> | ||||||
|  |  | ||||||
| 		<div style="position: absolute; bottom: 24px; right: 24px"> | 		<!-- <div style="position: absolute; bottom: 24px; right: 24px"> | ||||||
| 			<el-button style="margin-right: 10px" @click="goback()">返回</el-button> | 			<el-button style="margin-right: 10px" @click="goback()">返回</el-button> | ||||||
| 			<el-button v-if="isdetail" type="primary" @click="goEdit()"> | 			<el-button v-if="isdetail" type="primary" @click="goEdit()"> | ||||||
| 				编辑 | 				编辑 | ||||||
| @@ -145,6 +147,14 @@ | |||||||
| 					添加属性 | 					添加属性 | ||||||
| 				</el-button> | 				</el-button> | ||||||
| 			</span> | 			</span> | ||||||
|  | 		</div> --> | ||||||
|  |  | ||||||
|  | 		<div class="drawer-body__footer"> | ||||||
|  | 			<el-button style="" @click="goback()">取消</el-button> | ||||||
|  | 			<el-button v-if="isdetail" type="primary" @click="goEdit()"> | ||||||
|  | 				编辑 | ||||||
|  | 			</el-button> | ||||||
|  | 			<el-button v-else type="primary" @click="dataFormSubmit()">确定</el-button> | ||||||
| 		</div> | 		</div> | ||||||
|  |  | ||||||
| 		<product-attr-add | 		<product-attr-add | ||||||
| @@ -250,12 +260,12 @@ export default { | |||||||
| 					}, | 					}, | ||||||
| 				], | 				], | ||||||
| 				area: [ | 				area: [ | ||||||
| 					// { | 					{ | ||||||
| 					// 	type: 'float', | 						type: 'number', | ||||||
| 					// 	message: '单位平方数为浮点类型', | 						message: '请输入正确的数值', | ||||||
| 					// 	trigger: 'blur', | 						trigger: 'change', | ||||||
| 					// 	transfom: 'val => Float(val)', | 						transform: (val) => Number(val), | ||||||
| 					// }, | 					}, | ||||||
| 				], | 				], | ||||||
| 				processTime: [ | 				processTime: [ | ||||||
| 					{ | 					{ | ||||||
| @@ -263,12 +273,12 @@ export default { | |||||||
| 						message: '完成单位产品用时不能为空', | 						message: '完成单位产品用时不能为空', | ||||||
| 						trigger: 'blur', | 						trigger: 'blur', | ||||||
| 					}, | 					}, | ||||||
| 					// { | 					{ | ||||||
| 					// 	type: 'number', | 						type: 'number', | ||||||
| 					// 	message: '完成单位产品用时为浮点类型', | 						message: '请输入正确的数值', | ||||||
| 					// 	trigger: 'blur', | 						trigger: 'blur', | ||||||
| 					// 	transfom: 'val => Number(val)', | 						transform: (val) => Number(val), | ||||||
| 					// }, | 					}, | ||||||
| 				], | 				], | ||||||
| 			}, | 			}, | ||||||
| 			isdetail: false, | 			isdetail: false, | ||||||
| @@ -277,6 +287,7 @@ export default { | |||||||
| 	methods: { | 	methods: { | ||||||
| 		initData() { | 		initData() { | ||||||
| 			this.productAttributeList.splice(0); | 			this.productAttributeList.splice(0); | ||||||
|  | 			this.listQuery.total = 0; | ||||||
| 		}, | 		}, | ||||||
| 		init(id, isdetail) { | 		init(id, isdetail) { | ||||||
| 			this.initData(); | 			this.initData(); | ||||||
| @@ -304,12 +315,10 @@ export default { | |||||||
|  |  | ||||||
| 		getList() { | 		getList() { | ||||||
| 			// 获取产品的属性列表 | 			// 获取产品的属性列表 | ||||||
| 			const params = { | 			getProductAttrPage({ | ||||||
| 				pageSize: 10, | 				...this.listQuery, | ||||||
| 				pageNo: 1, |  | ||||||
| 				productId: this.dataForm.id, | 				productId: this.dataForm.id, | ||||||
| 			}; | 			}).then((response) => { | ||||||
| 			getProductAttrPage(params).then((response) => { |  | ||||||
| 				this.productAttributeList = response.data.list; | 				this.productAttributeList = response.data.list; | ||||||
| 				this.listQuery.total = response.data.total; | 				this.listQuery.total = response.data.total; | ||||||
| 			}); | 			}); | ||||||
| @@ -390,6 +399,8 @@ export default { | |||||||
| <style scoped> | <style scoped> | ||||||
| .drawer >>> .el-drawer { | .drawer >>> .el-drawer { | ||||||
| 	border-radius: 8px 0 0 8px; | 	border-radius: 8px 0 0 8px; | ||||||
|  | 	display: flex; | ||||||
|  | 	flex-direction: column; | ||||||
| } | } | ||||||
|  |  | ||||||
| .drawer >>> .el-form-item__label { | .drawer >>> .el-form-item__label { | ||||||
| @@ -400,14 +411,20 @@ export default { | |||||||
| 	margin: 0; | 	margin: 0; | ||||||
| 	padding: 32px 32px 24px; | 	padding: 32px 32px 24px; | ||||||
| 	border-bottom: 1px solid #dcdfe6; | 	border-bottom: 1px solid #dcdfe6; | ||||||
| 	margin-bottom: 30px; | } | ||||||
|  | .drawer >>> .el-drawer__body { | ||||||
|  | 	flex: 1; | ||||||
|  | 	height: 1px; | ||||||
|  | 	display: flex; | ||||||
|  | 	flex-direction: column; | ||||||
| } | } | ||||||
|  |  | ||||||
| .drawer >>> .content { | .drawer >>> .content { | ||||||
| 	padding: 0 24px 30px; | 	padding: 30px 24px; | ||||||
|  | 	flex: 1; | ||||||
| 	display: flex; | 	display: flex; | ||||||
| 	flex-direction: column; | 	flex-direction: column; | ||||||
| 	height: 100%; | 	/* height: 100%; */ | ||||||
| } | } | ||||||
|  |  | ||||||
| .drawer >>> .visual-part { | .drawer >>> .visual-part { | ||||||
| @@ -422,4 +439,10 @@ export default { | |||||||
| .drawer >>> .attr-list { | .drawer >>> .attr-list { | ||||||
| 	padding: 0 16px; | 	padding: 0 16px; | ||||||
| } | } | ||||||
|  |  | ||||||
|  | .drawer-body__footer { | ||||||
|  | 	display: flex; | ||||||
|  | 	justify-content: flex-end; | ||||||
|  | 	padding: 18px; | ||||||
|  | } | ||||||
| </style> | </style> | ||||||
|   | |||||||
| @@ -1,8 +1,8 @@ | |||||||
| <!-- | <!-- | ||||||
|  * @Author: zwq |  * @Author: zwq | ||||||
|  * @Date: 2023-08-01 14:55:51 |  * @Date: 2023-08-01 14:55:51 | ||||||
|  * @LastEditors: zwq |  * @LastEditors: DY | ||||||
|  * @LastEditTime: 2023-08-03 15:22:53 |  * @LastEditTime: 2023-10-13 10:27:00 | ||||||
|  * @Description: |  * @Description: | ||||||
| --> | --> | ||||||
| <template> | <template> | ||||||
| @@ -50,30 +50,25 @@ import { | |||||||
| const tableProps = [ | const tableProps = [ | ||||||
| 	{ | 	{ | ||||||
| 		prop: 'code', | 		prop: 'code', | ||||||
| 		label: '产品编码', | 		label: '产品编码' | ||||||
| 		align: 'center', |  | ||||||
| 	}, | 	}, | ||||||
| 	{ | 	{ | ||||||
| 		prop: 'name', | 		prop: 'name', | ||||||
| 		label: '产品名称', | 		label: '产品名称' | ||||||
| 		align: 'center', |  | ||||||
| 	}, | 	}, | ||||||
| 	{ | 	{ | ||||||
| 		prop: 'specifications', | 		prop: 'specifications', | ||||||
| 		label: '规格', | 		label: '规格' | ||||||
| 		align: 'center', |  | ||||||
| 	}, | 	}, | ||||||
| 	{ | 	{ | ||||||
| 		prop: 'unitDictValue', | 		prop: 'unitDictValue', | ||||||
| 		label: '单位', | 		label: '单位', | ||||||
| 		align: 'center', |  | ||||||
| 		subcomponent: unitDict, | 		subcomponent: unitDict, | ||||||
| 	}, | 	}, | ||||||
| 	{ | 	{ | ||||||
| 		prop: 'createTime', | 		prop: 'createTime', | ||||||
| 		label: '创建时间', | 		label: '创建时间', | ||||||
| 		align: 'center', | 		filter: parseTime | ||||||
| 		filter: parseTime, |  | ||||||
| 	}, | 	}, | ||||||
| ]; | ]; | ||||||
|  |  | ||||||
| @@ -127,14 +122,14 @@ export default { | |||||||
| 					name: 'search', | 					name: 'search', | ||||||
| 					color: 'primary', | 					color: 'primary', | ||||||
| 				}, | 				}, | ||||||
| 				{ | 				// { | ||||||
| 					type: 'separate', | 				// 	type: 'separate', | ||||||
| 				}, | 				// }, | ||||||
| 				{ | 				// { | ||||||
| 					type: 'button', | 				// 	type: 'button', | ||||||
| 					btnName: '重置', | 				// 	btnName: '重置', | ||||||
| 					name: 'reset', | 				// 	name: 'reset', | ||||||
| 				}, | 				// }, | ||||||
| 				{ | 				{ | ||||||
| 					type: 'separate', | 					type: 'separate', | ||||||
| 				}, | 				}, | ||||||
|   | |||||||
| @@ -7,53 +7,84 @@ | |||||||
| --> | --> | ||||||
| <template> | <template> | ||||||
| 	<el-form | 	<el-form | ||||||
|  | 		class="dialog-inner__form" | ||||||
| 		:model="dataForm" | 		:model="dataForm" | ||||||
| 		:rules="dataRule" | 		:rules="dataRule" | ||||||
| 		ref="dataForm" | 		ref="dataForm" | ||||||
| 		@keyup.enter.native="dataFormSubmit()" | 		@keyup.enter.native="dataFormSubmit()" | ||||||
| 		label-width="90px"> | 		label-width="90px"> | ||||||
| 		<el-form-item label="产线编码" prop="code"> | 		<el-row :gutter="20"> | ||||||
| 			<el-input | 			<el-col :span="12"> | ||||||
| 				v-model="dataForm.code" | 				<el-form-item label="产线编码" prop="code"> | ||||||
| 				clearable | 					<el-input | ||||||
| 				placeholder="请输入产线编码" /> | 						v-model="dataForm.code" | ||||||
| 		</el-form-item> | 						clearable | ||||||
| 		<el-form-item label="产线名称" prop="name"> | 						placeholder="请输入产线编码" /> | ||||||
| 			<el-input | 				</el-form-item> | ||||||
| 				v-model="dataForm.name" | 			</el-col> | ||||||
| 				clearable | 			<el-col :span="12"> | ||||||
| 				placeholder="请输入产线名称" /> | 				<el-form-item label="产线名称" prop="name"> | ||||||
| 		</el-form-item> | 					<el-input | ||||||
|     <el-form-item prop="factoryId" label="工厂名称"> | 						v-model="dataForm.name" | ||||||
|       <el-select | 						clearable | ||||||
|       v-model="dataForm.factoryId" filterable clearable placeholder="请选择工厂"> | 						placeholder="请输入产线名称" /> | ||||||
|         <el-option | 				</el-form-item> | ||||||
|           v-for="item in urlOptions.optionArr.arr0" | 			</el-col> | ||||||
|           :key="item.id" | 		</el-row> | ||||||
|           :label="item.name" | 		<el-row :gutter="20"> | ||||||
|           :value="item.id" | 			<el-col :span="12"> | ||||||
|         > | 				<el-form-item prop="factoryId" label="工厂名称"> | ||||||
|         </el-option> | 					<el-select | ||||||
|       </el-select> | 						v-model="dataForm.factoryId" | ||||||
|     </el-form-item> | 						filterable | ||||||
| 		<el-form-item label="产线TT值(h)" prop="tvalue"> | 						clearable | ||||||
| 			<el-input v-model="dataForm.tvalue" clearable placeholder="请输入每小时下片数量" /> | 						placeholder="请选择工厂"> | ||||||
| 		</el-form-item> | 						<el-option | ||||||
| 		<el-form-item label="额外编码" prop="externalCode"> | 							v-for="item in urlOptions.optionArr.arr0" | ||||||
| 			<el-input | 							:key="item.id" | ||||||
| 				v-model="dataForm.externalCode" | 							:label="item.name" | ||||||
| 				clearable | 							:value="item.id"></el-option> | ||||||
| 				placeholder="请输入额外编码" /> | 					</el-select> | ||||||
| 		</el-form-item> | 				</el-form-item> | ||||||
| 		<el-form-item label="描述" prop="description"> | 			</el-col> | ||||||
| 			<el-input | 			<el-col :span="12"> | ||||||
| 				v-model="dataForm.description" | 				<el-form-item label="产线TT值(h)" prop="tvalue"> | ||||||
| 				type="textarea" | 					<el-input | ||||||
| 				placeholder="请输入内容" /> | 						v-model="dataForm.tvalue" | ||||||
| 		</el-form-item> | 						clearable | ||||||
| 		<el-form-item label="备注" prop="remark"> | 						placeholder="请输入每小时下片数量" /> | ||||||
| 			<el-input v-model="dataForm.remark" clearable placeholder="请输入备注" /> | 				</el-form-item> | ||||||
| 		</el-form-item> | 			</el-col> | ||||||
|  | 		</el-row> | ||||||
|  | 		<el-row :gutter="20"> | ||||||
|  | 			<el-col :span="12"> | ||||||
|  | 				<el-form-item label="额外编码" prop="externalCode"> | ||||||
|  | 					<el-input | ||||||
|  | 						v-model="dataForm.externalCode" | ||||||
|  | 						clearable | ||||||
|  | 						placeholder="请输入额外编码" /> | ||||||
|  | 				</el-form-item> | ||||||
|  | 			</el-col> | ||||||
|  | 			<el-col :span="12"> | ||||||
|  | 				<el-form-item label="备注" prop="remark"> | ||||||
|  | 					<el-input | ||||||
|  | 						v-model="dataForm.remark" | ||||||
|  | 						clearable | ||||||
|  | 						placeholder="请输入备注" /> | ||||||
|  | 				</el-form-item> | ||||||
|  | 			</el-col> | ||||||
|  | 		</el-row> | ||||||
|  |  | ||||||
|  | 		<el-row> | ||||||
|  | 			<el-col> | ||||||
|  | 				<el-form-item label="描述" prop="description"> | ||||||
|  | 					<el-input | ||||||
|  | 						v-model="dataForm.description" | ||||||
|  | 						type="textarea" | ||||||
|  | 						placeholder="请输入内容" /> | ||||||
|  | 				</el-form-item> | ||||||
|  | 			</el-col> | ||||||
|  | 		</el-row> | ||||||
| 	</el-form> | 	</el-form> | ||||||
| </template> | </template> | ||||||
|  |  | ||||||
| @@ -65,22 +96,20 @@ import { | |||||||
| 	getProductionLine, | 	getProductionLine, | ||||||
| 	getCode, | 	getCode, | ||||||
| } from '@/api/core/base/productionLine'; | } from '@/api/core/base/productionLine'; | ||||||
| import { | import { getFactoryPage } from '@/api/core/base/factory'; | ||||||
| 	getFactoryPage, |  | ||||||
| } from '@/api/core/base/factory'; |  | ||||||
|  |  | ||||||
| export default { | export default { | ||||||
| 	mixins: [basicAdd], | 	mixins: [basicAdd], | ||||||
| 	data() { | 	data() { | ||||||
| 		return { | 		return { | ||||||
| 			urlOptions: { | 			urlOptions: { | ||||||
|         getOption: true, | 				getOption: true, | ||||||
| 			  isGetCode: true, | 				isGetCode: true, | ||||||
|         codeURL: getCode, | 				codeURL: getCode, | ||||||
| 				createURL: createProductionLine, | 				createURL: createProductionLine, | ||||||
| 				updateURL: updateProductionLine, | 				updateURL: updateProductionLine, | ||||||
| 				infoURL: getProductionLine, | 				infoURL: getProductionLine, | ||||||
|         optionArrUrl: [getFactoryPage], | 				optionArrUrl: [getFactoryPage], | ||||||
| 			}, | 			}, | ||||||
| 			dataForm: { | 			dataForm: { | ||||||
| 				id: undefined, | 				id: undefined, | ||||||
| @@ -99,13 +128,26 @@ export default { | |||||||
| 				name: [ | 				name: [ | ||||||
| 					{ required: true, message: '产线名称不能为空', trigger: 'blur' }, | 					{ required: true, message: '产线名称不能为空', trigger: 'blur' }, | ||||||
| 				], | 				], | ||||||
|         factoryId: [ | 				factoryId: [ | ||||||
| 					{ required: true, message: '工厂不能为空', trigger: 'change' }, | 					{ required: true, message: '工厂不能为空', trigger: 'change' }, | ||||||
| 				], | 				], | ||||||
|  | 				tvalue: [ | ||||||
|  | 					{ | ||||||
|  | 						type: 'number', | ||||||
|  | 						message: '请输入正确的数字', | ||||||
|  | 						trigger: 'change', | ||||||
|  | 						transform: (val) => Number(val), | ||||||
|  | 					}, | ||||||
|  | 				], | ||||||
| 			}, | 			}, | ||||||
| 		}; | 		}; | ||||||
| 	}, | 	}, | ||||||
| 	methods: { | 	methods: {}, | ||||||
| 	}, |  | ||||||
| }; | }; | ||||||
| </script> | </script> | ||||||
|  |  | ||||||
|  | <style scoped> | ||||||
|  | .dialog-inner__form >>> .el-select { | ||||||
|  | 	width: 100%; | ||||||
|  | } | ||||||
|  | </style> | ||||||
|   | |||||||
| @@ -29,7 +29,7 @@ | |||||||
| 			@cancel="handleCancel" | 			@cancel="handleCancel" | ||||||
| 			@confirm="handleConfirm" | 			@confirm="handleConfirm" | ||||||
| 			:before-close="handleCancel" | 			:before-close="handleCancel" | ||||||
| 			width="70%"> | 			width="50%"> | ||||||
| 			<add-or-update | 			<add-or-update | ||||||
| 				ref="addOrUpdate" | 				ref="addOrUpdate" | ||||||
| 				@refreshDataList="successSubmit"></add-or-update> | 				@refreshDataList="successSubmit"></add-or-update> | ||||||
| @@ -52,45 +52,37 @@ import { | |||||||
| const tableProps = [ | const tableProps = [ | ||||||
| 	{ | 	{ | ||||||
| 		prop: 'code', | 		prop: 'code', | ||||||
| 		label: '产线编码', | 		label: '产线编码' | ||||||
| 		align: 'center', |  | ||||||
| 	}, | 	}, | ||||||
| 	{ | 	{ | ||||||
| 		prop: 'name', | 		prop: 'name', | ||||||
| 		label: '产线名称', | 		label: '产线名称' | ||||||
| 		align: 'center', |  | ||||||
| 	}, | 	}, | ||||||
| 	{ | 	{ | ||||||
| 		prop: 'factoryName', | 		prop: 'factoryName', | ||||||
| 		label: '工厂', | 		label: '工厂' | ||||||
| 		align: 'center', |  | ||||||
| 	}, | 	}, | ||||||
| 	{ | 	{ | ||||||
| 		prop: 'externalCode', | 		prop: 'externalCode', | ||||||
| 		label: '额外编码', | 		label: '额外编码' | ||||||
| 		align: 'center', |  | ||||||
| 	}, | 	}, | ||||||
| 	{ | 	{ | ||||||
| 		prop: 'status', | 		prop: 'status', | ||||||
| 		label: '当前状态', | 		label: '当前状态', | ||||||
| 		align: 'center', |  | ||||||
| 		filter: codeFilter('lineStatus'), | 		filter: codeFilter('lineStatus'), | ||||||
| 	}, | 	}, | ||||||
| 	{ | 	{ | ||||||
| 		prop: 'description', | 		prop: 'description', | ||||||
| 		label: '描述', | 		label: '描述' | ||||||
| 		align: 'center', |  | ||||||
| 	}, | 	}, | ||||||
| 	{ | 	{ | ||||||
| 		prop: 'remark', | 		prop: 'remark', | ||||||
| 		label: '备注', | 		label: '备注' | ||||||
| 		align: 'center', |  | ||||||
| 	}, | 	}, | ||||||
| 	{ | 	{ | ||||||
| 		prop: 'createTime', | 		prop: 'createTime', | ||||||
| 		label: '创建时间', | 		label: '创建时间', | ||||||
| 		align: 'center', | 		filter: parseTime | ||||||
| 		filter: parseTime, |  | ||||||
| 	}, | 	}, | ||||||
| ]; | ]; | ||||||
|  |  | ||||||
| @@ -132,14 +124,14 @@ export default { | |||||||
| 					name: 'search', | 					name: 'search', | ||||||
| 					color: 'primary', | 					color: 'primary', | ||||||
| 				}, | 				}, | ||||||
| 				{ | 				// { | ||||||
| 					type: 'separate', | 				// 	type: 'separate', | ||||||
| 				}, | 				// }, | ||||||
| 				{ | 				// { | ||||||
| 					type: 'button', | 				// 	type: 'button', | ||||||
| 					btnName: '重置', | 				// 	btnName: '重置', | ||||||
| 					name: 'reset', | 				// 	name: 'reset', | ||||||
| 				}, | 				// }, | ||||||
| 				{ | 				{ | ||||||
| 					type: 'separate', | 					type: 'separate', | ||||||
| 				}, | 				}, | ||||||
| @@ -173,7 +165,7 @@ export default { | |||||||
| 		getDataList() { | 		getDataList() { | ||||||
| 			this.dataListLoading = true; | 			this.dataListLoading = true; | ||||||
| 			this.urlOptions.getDataListURL(this.listQuery).then((response) => { | 			this.urlOptions.getDataListURL(this.listQuery).then((response) => { | ||||||
| 				this.total = response.data.total; | 				this.listQuery.total = response.data.total; | ||||||
| 				this.getStatus(response.data.list); | 				this.getStatus(response.data.list); | ||||||
| 				this.dataListLoading = false; | 				this.dataListLoading = false; | ||||||
| 			}); | 			}); | ||||||
| @@ -195,7 +187,7 @@ export default { | |||||||
| 			switch (val.btnName) { | 			switch (val.btnName) { | ||||||
| 				case 'search': | 				case 'search': | ||||||
| 					this.listQuery.pageNo = 1; | 					this.listQuery.pageNo = 1; | ||||||
| 					this.listQuery.pageSize = 10;.7 | 					this.listQuery.pageSize = 10; | ||||||
| 					this.listQuery.name = val.name; | 					this.listQuery.name = val.name; | ||||||
| 					this.getDataList(); | 					this.getDataList(); | ||||||
| 					break; | 					break; | ||||||
|   | |||||||
| @@ -2,7 +2,7 @@ | |||||||
|  * @Author: zwq |  * @Author: zwq | ||||||
|  * @Date: 2023-08-01 13:52:10 |  * @Date: 2023-08-01 13:52:10 | ||||||
|  * @LastEditors: DY |  * @LastEditors: DY | ||||||
|  * @LastEditTime: 2023-09-21 10:48:54 |  * @LastEditTime: 2023-10-16 13:40:00 | ||||||
|  * @Description: |  * @Description: | ||||||
| --> | --> | ||||||
| <template> | <template> | ||||||
| @@ -12,33 +12,45 @@ | |||||||
| 		ref="dataForm" | 		ref="dataForm" | ||||||
| 		@keyup.enter.native="dataFormSubmit()" | 		@keyup.enter.native="dataFormSubmit()" | ||||||
| 		label-width="90px"> | 		label-width="90px"> | ||||||
| 		<el-form-item label="工段编码" prop="code"> | 		<el-row :gutter="20"> | ||||||
| 			<el-input | 			<el-col :span="12"> | ||||||
| 				v-model="dataForm.code" | 				<el-form-item label="工段编码" prop="code"> | ||||||
| 				clearable | 					<el-input | ||||||
| 				placeholder="请输入工段编码" /> | 						v-model="dataForm.code" | ||||||
| 		</el-form-item> | 						clearable | ||||||
| 		<el-form-item label="工段名称" prop="name"> | 						placeholder="请输入工段编码" /> | ||||||
| 			<el-input | 				</el-form-item> | ||||||
| 				v-model="dataForm.name" | 			</el-col> | ||||||
| 				clearable | 			<el-col :span="12"> | ||||||
| 				placeholder="请输入工段名称" /> | 				<el-form-item label="工段名称" prop="name"> | ||||||
| 		</el-form-item> | 					<el-input | ||||||
|     <el-form-item prop="productionLineId" label="产线"> | 						v-model="dataForm.name" | ||||||
|       <el-select | 						clearable | ||||||
|       v-model="dataForm.productionLineId" filterable clearable placeholder="请选择产线"> | 						placeholder="请输入工段名称" /> | ||||||
|         <el-option | 				</el-form-item> | ||||||
|           v-for="item in urlOptions.optionArr.arr0" | 			</el-col> | ||||||
|           :key="item.id" | 		</el-row> | ||||||
|           :label="item.name" | 		<el-row :gutter="20"> | ||||||
|           :value="item.id" | 			<el-col :span="12"> | ||||||
|         > | 				<el-form-item prop="productionLineId" label="产线"> | ||||||
|         </el-option> | 					<el-select | ||||||
|       </el-select> | 					v-model="dataForm.productionLineId" filterable clearable placeholder="请选择产线"> | ||||||
|     </el-form-item> | 						<el-option | ||||||
| 		<el-form-item label="排序" prop="sort"> | 							v-for="item in urlOptions.optionArr.arr0" | ||||||
| 			<el-input-number v-model="dataForm.sort" :min="1" :max="100" clearable placeholder="请输入排序" /> | 							:key="item.id" | ||||||
| 		</el-form-item> | 							:label="item.name" | ||||||
|  | 							:value="item.id" | ||||||
|  | 						> | ||||||
|  | 						</el-option> | ||||||
|  | 					</el-select> | ||||||
|  | 				</el-form-item> | ||||||
|  | 			</el-col> | ||||||
|  | 			<el-col :span="12"> | ||||||
|  | 				<el-form-item label="排序" prop="sort"> | ||||||
|  | 					<el-input-number v-model="dataForm.sort" :min="1" :max="100" clearable placeholder="请输入排序" /> | ||||||
|  | 				</el-form-item> | ||||||
|  | 			</el-col> | ||||||
|  | 		</el-row> | ||||||
| 		<el-form-item label="备注" prop="remark"> | 		<el-form-item label="备注" prop="remark"> | ||||||
| 			<el-input v-model="dataForm.remark" clearable placeholder="请输入备注" /> | 			<el-input v-model="dataForm.remark" clearable placeholder="请输入备注" /> | ||||||
| 		</el-form-item> | 		</el-form-item> | ||||||
|   | |||||||
| @@ -29,7 +29,7 @@ | |||||||
| 			@cancel="handleCancel" | 			@cancel="handleCancel" | ||||||
| 			@confirm="handleConfirm" | 			@confirm="handleConfirm" | ||||||
| 			:before-close="handleCancel" | 			:before-close="handleCancel" | ||||||
| 			width="70%"> | 			width="50%"> | ||||||
| 			<add-or-update | 			<add-or-update | ||||||
| 				ref="addOrUpdate" | 				ref="addOrUpdate" | ||||||
| 				@refreshDataList="successSubmit"></add-or-update> | 				@refreshDataList="successSubmit"></add-or-update> | ||||||
| @@ -50,34 +50,28 @@ import { | |||||||
| const tableProps = [ | const tableProps = [ | ||||||
| 	{ | 	{ | ||||||
| 		prop: 'code', | 		prop: 'code', | ||||||
| 		label: '工段编码', | 		label: '工段编码' | ||||||
| 		align: 'center', |  | ||||||
| 	}, | 	}, | ||||||
| 	{ | 	{ | ||||||
| 		prop: 'name', | 		prop: 'name', | ||||||
| 		label: '工段名称', | 		label: '工段名称' | ||||||
| 		align: 'center', |  | ||||||
| 	}, | 	}, | ||||||
| 	{ | 	{ | ||||||
| 		prop: 'productionLineName', | 		prop: 'productionLineName', | ||||||
| 		label: '产线', | 		label: '产线' | ||||||
| 		align: 'center', |  | ||||||
| 	}, | 	}, | ||||||
| 	{ | 	{ | ||||||
| 		prop: 'sort', | 		prop: 'sort', | ||||||
| 		label: '排序', | 		label: '排序' | ||||||
| 		align: 'center', |  | ||||||
| 	}, | 	}, | ||||||
| 	{ | 	{ | ||||||
| 		prop: 'remark', | 		prop: 'remark', | ||||||
| 		label: '备注', | 		label: '备注' | ||||||
| 		align: 'center', |  | ||||||
| 	}, | 	}, | ||||||
| 	{ | 	{ | ||||||
| 		prop: 'createTime', | 		prop: 'createTime', | ||||||
| 		label: '创建时间', | 		label: '创建时间', | ||||||
| 		align: 'center', | 		filter: parseTime | ||||||
| 		filter: parseTime, |  | ||||||
| 	}, | 	}, | ||||||
| ]; | ]; | ||||||
|  |  | ||||||
| @@ -119,14 +113,14 @@ export default { | |||||||
| 					name: 'search', | 					name: 'search', | ||||||
| 					color: 'primary', | 					color: 'primary', | ||||||
| 				}, | 				}, | ||||||
| 				{ | 				// { | ||||||
| 					type: 'separate', | 				// 	type: 'separate', | ||||||
| 				}, | 				// }, | ||||||
| 				{ | 				// { | ||||||
| 					type: 'button', | 				// 	type: 'button', | ||||||
| 					btnName: '重置', | 				// 	btnName: '重置', | ||||||
| 					name: 'reset', | 				// 	name: 'reset', | ||||||
| 				}, | 				// }, | ||||||
| 				{ | 				{ | ||||||
| 					type: 'separate', | 					type: 'separate', | ||||||
| 				}, | 				}, | ||||||
|   | |||||||
| @@ -1,7 +1,7 @@ | |||||||
| <!-- | <!-- | ||||||
|  * @Author: Do not edit |  * @Author: Do not edit | ||||||
|  * @Date: 2023-08-29 14:59:29 |  * @Date: 2023-08-29 14:59:29 | ||||||
|  * @LastEditTime: 2023-10-09 09:08:08 |  * @LastEditTime: 2023-10-16 15:10:42 | ||||||
|  * @LastEditors: DY |  * @LastEditors: DY | ||||||
|  * @Description:  |  * @Description:  | ||||||
| --> | --> | ||||||
| @@ -12,6 +12,7 @@ | |||||||
| 			ref="searchBarForm" | 			ref="searchBarForm" | ||||||
| 			@headBtnClick="buttonClick" /> | 			@headBtnClick="buttonClick" /> | ||||||
| 		<base-table | 		<base-table | ||||||
|  | 			v-if="showData.length" | ||||||
| 			class="right-aside" | 			class="right-aside" | ||||||
| 			v-loading="dataListLoading" | 			v-loading="dataListLoading" | ||||||
| 			:table-props="tableProps" | 			:table-props="tableProps" | ||||||
| @@ -22,6 +23,7 @@ | |||||||
| 			@selection-change="selectChange" | 			@selection-change="selectChange" | ||||||
| 			> | 			> | ||||||
| 		</base-table> | 		</base-table> | ||||||
|  | 		<div v-else class="no-data-bg"></div> | ||||||
| 		<pagination | 		<pagination | ||||||
| 			:limit.sync="listQuery.pageSize" | 			:limit.sync="listQuery.pageSize" | ||||||
| 			:page.sync="listQuery.pageNo" | 			:page.sync="listQuery.pageNo" | ||||||
| @@ -117,6 +119,7 @@ export default { | |||||||
|         pageNo: 1, |         pageNo: 1, | ||||||
|         total: 1, |         total: 1, | ||||||
|       }, |       }, | ||||||
|  | 			fileName: '', | ||||||
|       exportLoading: false, |       exportLoading: false, | ||||||
|       dataListLoading: false, |       dataListLoading: false, | ||||||
| 			dialogVisible: false, | 			dialogVisible: false, | ||||||
| @@ -194,7 +197,8 @@ export default { | |||||||
| 					type: 'button', | 					type: 'button', | ||||||
| 					btnName: '导出', | 					btnName: '导出', | ||||||
| 					name: 'export', | 					name: 'export', | ||||||
| 					color: 'warning', | 					color: 'primary', | ||||||
|  | 					plain: true | ||||||
| 				} | 				} | ||||||
| 			], | 			], | ||||||
| 		}; | 		}; | ||||||
| @@ -207,6 +211,7 @@ export default { | |||||||
| 		test() { | 		test() { | ||||||
| 			var target = document.getElementsByClassName("right-aside")[0] | 			var target = document.getElementsByClassName("right-aside")[0] | ||||||
| 			target.style.background = '#FFFFFF' | 			target.style.background = '#FFFFFF' | ||||||
|  | 			var that = this | ||||||
| 			setTimeout(() => { | 			setTimeout(() => { | ||||||
| 				html2canvas(target).then(function(canvas) { | 				html2canvas(target).then(function(canvas) { | ||||||
| 						var contentWidth = canvas.width | 						var contentWidth = canvas.width | ||||||
| @@ -242,7 +247,7 @@ export default { | |||||||
| 							} | 							} | ||||||
| 						} | 						} | ||||||
|  |  | ||||||
| 						pdf.save('产线统计自动报表.pdf') | 						pdf.save(that.fileName + '产线产量.pdf') | ||||||
| 				}) | 				}) | ||||||
| 			}, 300) | 			}, 300) | ||||||
| 		}, | 		}, | ||||||
| @@ -285,7 +290,7 @@ export default { | |||||||
|       try { |       try { | ||||||
|         FileSaver.saveAs(new Blob([exportTableOut], { |         FileSaver.saveAs(new Blob([exportTableOut], { | ||||||
|           type: 'application/octet-stream' |           type: 'application/octet-stream' | ||||||
|         }), '产线统计自动报表.xlsx') |         }), this.fileName + '产线产量.xlsx') | ||||||
|       } catch (e) { |       } catch (e) { | ||||||
|         if (typeof console !== 'undefined') console.log(e, exportTableOut) |         if (typeof console !== 'undefined') console.log(e, exportTableOut) | ||||||
|       } |       } | ||||||
| @@ -310,6 +315,9 @@ export default { | |||||||
| 					this.listQuery.reportType = val.reportType ? val.reportType : undefined; | 					this.listQuery.reportType = val.reportType ? val.reportType : undefined; | ||||||
| 					this.listQuery.reportStartTime = val.timeVal ? [new Date(val.timeVal[0]).getTime()] : undefined; | 					this.listQuery.reportStartTime = val.timeVal ? [new Date(val.timeVal[0]).getTime()] : undefined; | ||||||
| 					this.listQuery.reportEndTime = val.timeVal ? [new Date(val.timeVal[1]).getTime()] : undefined; | 					this.listQuery.reportEndTime = val.timeVal ? [new Date(val.timeVal[1]).getTime()] : undefined; | ||||||
|  | 					if (val.timeVal && val.timeVal.length > 0) { | ||||||
|  | 						this.fileName = val.timeVal[0].slice(0, 10) + '-' + val.timeVal[1].slice(0, 10) + '_' | ||||||
|  |           } | ||||||
| 					this.getDataList(); | 					this.getDataList(); | ||||||
| 					break; | 					break; | ||||||
| 				case 'export': | 				case 'export': | ||||||
| @@ -327,7 +335,7 @@ export default { | |||||||
| 					item.reportType = item.reportType === 1 ? '日' : item.reportType === 2 ? '周' : '月' | 					item.reportType = item.reportType === 1 ? '日' : item.reportType === 2 ? '周' : '月' | ||||||
| 					return item | 					return item | ||||||
| 				}); | 				}); | ||||||
|         this.total = response.data.total; |         this.listQuery.total = response.data.total; | ||||||
|         this.dataListLoading = false; |         this.dataListLoading = false; | ||||||
| 				this.showData = this.tableData | 				this.showData = this.tableData | ||||||
|       }); |       }); | ||||||
|   | |||||||
| @@ -1,7 +1,7 @@ | |||||||
| <!-- | <!-- | ||||||
|  * @Author: Do not edit |  * @Author: Do not edit | ||||||
|  * @Date: 2023-08-29 14:59:29 |  * @Date: 2023-08-29 14:59:29 | ||||||
|  * @LastEditTime: 2023-10-09 15:14:42 |  * @LastEditTime: 2023-10-16 15:18:23 | ||||||
|  * @LastEditors: DY |  * @LastEditors: DY | ||||||
|  * @Description:  |  * @Description:  | ||||||
| --> | --> | ||||||
| @@ -12,6 +12,7 @@ | |||||||
| 			ref="searchBarForm" | 			ref="searchBarForm" | ||||||
| 			@headBtnClick="buttonClick" /> | 			@headBtnClick="buttonClick" /> | ||||||
| 		<base-table | 		<base-table | ||||||
|  | 			v-if="showData.length" | ||||||
| 			class="right-aside" | 			class="right-aside" | ||||||
| 			v-loading="dataListLoading" | 			v-loading="dataListLoading" | ||||||
| 			:table-props="tableProps" | 			:table-props="tableProps" | ||||||
| @@ -29,6 +30,7 @@ | |||||||
| 				:method-list="tableBtn" | 				:method-list="tableBtn" | ||||||
| 				@clickBtn="handleClick" /> | 				@clickBtn="handleClick" /> | ||||||
| 		</base-table> | 		</base-table> | ||||||
|  | 		<div v-else class="no-data-bg"></div> | ||||||
| 		<pagination | 		<pagination | ||||||
| 			:limit.sync="listQuery.pageSize" | 			:limit.sync="listQuery.pageSize" | ||||||
| 			:page.sync="listQuery.pageNo" | 			:page.sync="listQuery.pageNo" | ||||||
| @@ -110,7 +112,7 @@ export default { | |||||||
| 			showData: [], | 			showData: [], | ||||||
| 			tableData: [], | 			tableData: [], | ||||||
| 			selectedList: [], | 			selectedList: [], | ||||||
| 			fileName: [], | 			fileName: '', | ||||||
| 			formConfig: [ | 			formConfig: [ | ||||||
| 				{ | 				{ | ||||||
| 					type: 'select', | 					type: 'select', | ||||||
| @@ -145,7 +147,8 @@ export default { | |||||||
| 					type: 'button', | 					type: 'button', | ||||||
| 					btnName: '导出', | 					btnName: '导出', | ||||||
| 					name: 'export', | 					name: 'export', | ||||||
| 					color: 'warning', | 					color: 'primary', | ||||||
|  | 					plain: true | ||||||
| 				} | 				} | ||||||
| 			], | 			], | ||||||
| 		}; | 		}; | ||||||
| @@ -156,7 +159,7 @@ export default { | |||||||
| 		} | 		} | ||||||
| 		// const time = new Date() | 		// const time = new Date() | ||||||
| 		// this.formConfig[1].defaultSelect = [time, time] | 		// this.formConfig[1].defaultSelect = [time, time] | ||||||
| 		// this.getDataList() | 		this.getDataList() | ||||||
| 		this.getPdLineList() | 		this.getPdLineList() | ||||||
| 	}, | 	}, | ||||||
| 	methods: { | 	methods: { | ||||||
| @@ -199,7 +202,7 @@ export default { | |||||||
| 							} | 							} | ||||||
| 						} | 						} | ||||||
|  |  | ||||||
| 						pdf.save(that.fileName[0] + '-' + that.fileName[1] + '_产线产量.pdf') | 						pdf.save(that.fileName + '产线产量.pdf') | ||||||
| 				}) | 				}) | ||||||
| 			}, 300) | 			}, 300) | ||||||
| 		}, | 		}, | ||||||
| @@ -222,7 +225,7 @@ export default { | |||||||
|       try { |       try { | ||||||
|         FileSaver.saveAs(new Blob([exportTableOut], { |         FileSaver.saveAs(new Blob([exportTableOut], { | ||||||
|           type: 'application/octet-stream' |           type: 'application/octet-stream' | ||||||
|         }), this.fileName[0] + '-' + this.fileName[1] + '_产线产量.xlsx') |         }), this.fileName + '产线产量.xlsx') | ||||||
|       } catch (e) { |       } catch (e) { | ||||||
|         if (typeof console !== 'undefined') console.log(e, exportTableOut) |         if (typeof console !== 'undefined') console.log(e, exportTableOut) | ||||||
|       } |       } | ||||||
| @@ -265,17 +268,10 @@ export default { | |||||||
| 					this.listQuery.proLineId = val.line ? val.line : undefined; | 					this.listQuery.proLineId = val.line ? val.line : undefined; | ||||||
| 					this.listQuery.startTime = val.timeVal ? new Date(val.timeVal[0]).getTime() : undefined; | 					this.listQuery.startTime = val.timeVal ? new Date(val.timeVal[0]).getTime() : undefined; | ||||||
| 					this.listQuery.endTime = val.timeVal ? new Date(val.timeVal[1]).getTime() : undefined; | 					this.listQuery.endTime = val.timeVal ? new Date(val.timeVal[1]).getTime() : undefined; | ||||||
| 					console.log('nihc 你好', val.timeVal) |  | ||||||
| 					if (val.timeVal && val.timeVal.length > 0) { | 					if (val.timeVal && val.timeVal.length > 0) { | ||||||
| 						this.fileName[0] = val.timeVal[0].slice(0, 10) | 						this.fileName = val.timeVal[0].slice(0, 10) + '-' + val.timeVal[1].slice(0, 10) + '_' | ||||||
| 						this.fileName[1] = val.timeVal[1].slice(0, 10) |  | ||||||
|             this.getDataList(); |  | ||||||
|           } else { |  | ||||||
|             this.$message({ |  | ||||||
|               message: '请选择时间', |  | ||||||
|               type: 'warning' |  | ||||||
|             }); |  | ||||||
|           } |           } | ||||||
|  | 					this.getDataList(); | ||||||
| 					break; | 					break; | ||||||
| 				case 'export': | 				case 'export': | ||||||
| 					this.handleExport(); | 					this.handleExport(); | ||||||
| @@ -289,7 +285,7 @@ export default { | |||||||
|       this.dataListLoading = true; |       this.dataListLoading = true; | ||||||
|       this.urlOptions.getDataListURL(this.listQuery).then(response => { |       this.urlOptions.getDataListURL(this.listQuery).then(response => { | ||||||
|         this.tableData = response.data; |         this.tableData = response.data; | ||||||
|         this.total = response.data.total; |         this.listQuery.total = response.data.length; | ||||||
|         this.dataListLoading = false; |         this.dataListLoading = false; | ||||||
| 				this.showData = this.tableData | 				this.showData = this.tableData | ||||||
|       }); |       }); | ||||||
|   | |||||||
| @@ -11,13 +11,14 @@ | |||||||
| 			ref="search-bar" /> | 			ref="search-bar" /> | ||||||
| 		<el-skeleton v-if="initing" :rows="6" animated /> | 		<el-skeleton v-if="initing" :rows="6" animated /> | ||||||
| 		<!-- :span-method="mergeColumnHandler" --> | 		<!-- :span-method="mergeColumnHandler" --> | ||||||
|  | 		<div v-else :class="{ 'no-data-bg': !tableData || tableData.length == 0 }"> | ||||||
| 		<base-table | 		<base-table | ||||||
| 			v-else | 		v-if="tableData && tableData.length > 0" | ||||||
| 			:table-props="tableProps" | 			:table-props="tableProps" | ||||||
| 			:table-data="tableData" | 			:table-data="tableData" | ||||||
| 			@emitFun="handleEmitFun"></base-table> | 			@emitFun="handleEmitFun" | ||||||
| 		<!-- :page="queryParams.pageNo" | 		/> | ||||||
| 			:limit="queryParams.pageSize" --> | 		</div> | ||||||
| 	</div> | 	</div> | ||||||
| </template> | </template> | ||||||
|  |  | ||||||
| @@ -65,10 +66,10 @@ export default { | |||||||
| 						label: times.slice(0, 10) + ' ' + times.slice(11), | 						label: times.slice(0, 10) + ' ' + times.slice(11), | ||||||
| 						align: 'center', | 						align: 'center', | ||||||
| 						children: [ | 						children: [ | ||||||
| 							{ prop: times + '_in', label: '投入数量', align: 'center' }, | 							{ prop: times + '_in', label: '投入数量' }, | ||||||
| 							{ prop: times + '_out', label: '产出数量', align: 'center' }, | 							{ prop: times + '_out', label: '产出数量' }, | ||||||
| 							{ prop: times + '_junk', label: '报废数量', align: 'center' }, | 							{ prop: times + '_junk', label: '报废数量' }, | ||||||
| 							{ prop: times + '_area', label: '产出面积', align: 'center' } | 							{ prop: times + '_area', label: '产出面积' } | ||||||
| 						] | 						] | ||||||
| 					} | 					} | ||||||
| 					this.arr.push(subprop) | 					this.arr.push(subprop) | ||||||
| @@ -149,14 +150,14 @@ export default { | |||||||
|           { |           { | ||||||
|             prop: 'proLineName', |             prop: 'proLineName', | ||||||
|             label: '生产线', |             label: '生产线', | ||||||
|             align: 'center', | 						fixed: 'left', | ||||||
| 						fixed: 'left' | 						showOverflowTooltip: true | ||||||
|           }, |           }, | ||||||
|           { |           { | ||||||
|             prop: 'spec', |             prop: 'spec', | ||||||
|             label: '产品规格', |             label: '产品规格', | ||||||
|             align: 'center', | 						fixed: 'left', | ||||||
| 						fixed: 'left' | 						showOverflowTooltip: true | ||||||
|           } |           } | ||||||
| 				] | 				] | ||||||
| 				this.buildProps(res.data.nameData); | 				this.buildProps(res.data.nameData); | ||||||
|   | |||||||
| @@ -1,7 +1,7 @@ | |||||||
| <!-- | <!-- | ||||||
|  * @Author: Do not edit |  * @Author: Do not edit | ||||||
|  * @Date: 2023-08-29 14:59:29 |  * @Date: 2023-08-29 14:59:29 | ||||||
|  * @LastEditTime: 2023-10-08 10:51:49 |  * @LastEditTime: 2023-10-16 15:19:04 | ||||||
|  * @LastEditors: DY |  * @LastEditors: DY | ||||||
|  * @Description:  |  * @Description:  | ||||||
| --> | --> | ||||||
| @@ -13,6 +13,7 @@ | |||||||
| 			ref="searchBarForm" | 			ref="searchBarForm" | ||||||
| 			@headBtnClick="buttonClick" /> | 			@headBtnClick="buttonClick" /> | ||||||
| 		<base-table | 		<base-table | ||||||
|  | 			v-if="showData.length" | ||||||
| 			class="right-aside" | 			class="right-aside" | ||||||
| 			v-loading="dataListLoading" | 			v-loading="dataListLoading" | ||||||
| 			:table-props="tableProps" | 			:table-props="tableProps" | ||||||
| @@ -30,6 +31,7 @@ | |||||||
| 				:method-list="tableBtn" | 				:method-list="tableBtn" | ||||||
| 				@clickBtn="handleClick" /> | 				@clickBtn="handleClick" /> | ||||||
| 		</base-table> | 		</base-table> | ||||||
|  | 		<div v-else class="no-data-bg"></div> | ||||||
| 		<pagination | 		<pagination | ||||||
| 			:limit.sync="listQuery.pageSize" | 			:limit.sync="listQuery.pageSize" | ||||||
| 			:page.sync="listQuery.pageNo" | 			:page.sync="listQuery.pageNo" | ||||||
| @@ -129,6 +131,7 @@ export default { | |||||||
| 			tableBtn: [], | 			tableBtn: [], | ||||||
| 			tableData: [], | 			tableData: [], | ||||||
| 			showData: [], | 			showData: [], | ||||||
|  | 			fileName: '', | ||||||
| 			formConfig: [ | 			formConfig: [ | ||||||
| 				{ | 				{ | ||||||
| 					type: 'select', | 					type: 'select', | ||||||
| @@ -187,7 +190,8 @@ export default { | |||||||
| 					type: 'button', | 					type: 'button', | ||||||
| 					btnName: '导出', | 					btnName: '导出', | ||||||
| 					name: 'export', | 					name: 'export', | ||||||
| 					color: 'warning', | 					color: 'primary', | ||||||
|  | 					plain: true | ||||||
| 				} | 				} | ||||||
| 			], | 			], | ||||||
| 		}; | 		}; | ||||||
| @@ -200,6 +204,7 @@ export default { | |||||||
| 		test() { | 		test() { | ||||||
| 			var target = document.getElementsByClassName("right-aside")[0] | 			var target = document.getElementsByClassName("right-aside")[0] | ||||||
| 			target.style.background = '#FFFFFF' | 			target.style.background = '#FFFFFF' | ||||||
|  | 			var that = this | ||||||
| 			setTimeout(() => { | 			setTimeout(() => { | ||||||
| 				html2canvas(target).then(function(canvas) { | 				html2canvas(target).then(function(canvas) { | ||||||
| 						var contentWidth = canvas.width | 						var contentWidth = canvas.width | ||||||
| @@ -235,7 +240,7 @@ export default { | |||||||
| 							} | 							} | ||||||
| 						} | 						} | ||||||
|  |  | ||||||
| 						pdf.save('工段统计自动报表.pdf') | 						pdf.save(that.fileName + '工段统计.pdf') | ||||||
| 				}) | 				}) | ||||||
| 			}, 300) | 			}, 300) | ||||||
| 		}, | 		}, | ||||||
| @@ -258,7 +263,7 @@ export default { | |||||||
|       try { |       try { | ||||||
|         FileSaver.saveAs(new Blob([exportTableOut], { |         FileSaver.saveAs(new Blob([exportTableOut], { | ||||||
|           type: 'application/octet-stream' |           type: 'application/octet-stream' | ||||||
|         }), '工段统计自动报表.xlsx') |         }), this.fileName + '工段统计.xlsx') | ||||||
|       } catch (e) { |       } catch (e) { | ||||||
|         if (typeof console !== 'undefined') console.log(e, exportTableOut) |         if (typeof console !== 'undefined') console.log(e, exportTableOut) | ||||||
|       } |       } | ||||||
| @@ -307,6 +312,9 @@ export default { | |||||||
| 					this.listQuery.reportType = val.reportType ? val.reportType : undefined; | 					this.listQuery.reportType = val.reportType ? val.reportType : undefined; | ||||||
| 					this.listQuery.reportStartTime = val.timeVal ? [new Date(val.timeVal[0]).getTime()] : undefined; | 					this.listQuery.reportStartTime = val.timeVal ? [new Date(val.timeVal[0]).getTime()] : undefined; | ||||||
| 					this.listQuery.reportEndTime = val.timeVal ? [new Date(val.timeVal[1]).getTime()] : undefined; | 					this.listQuery.reportEndTime = val.timeVal ? [new Date(val.timeVal[1]).getTime()] : undefined; | ||||||
|  | 					if (val.timeVal && val.timeVal.length > 0) { | ||||||
|  | 						this.fileName = val.timeVal[0].slice(0, 10) + '-' + val.timeVal[1].slice(0, 10) + '_' | ||||||
|  |           } | ||||||
| 					this.getDataList(); | 					this.getDataList(); | ||||||
| 					break; | 					break; | ||||||
| 				case 'export': | 				case 'export': | ||||||
| @@ -325,7 +333,7 @@ export default { | |||||||
| 					return item | 					return item | ||||||
| 				}); | 				}); | ||||||
| 				this.showData = this.tableData | 				this.showData = this.tableData | ||||||
|         this.total = response.data.total; |         this.listQuery.total = response.data.total; | ||||||
|         this.dataListLoading = false; |         this.dataListLoading = false; | ||||||
|       }); |       }); | ||||||
|     }, |     }, | ||||||
|   | |||||||
| @@ -3,15 +3,20 @@ | |||||||
| 		<search-bar | 		<search-bar | ||||||
| 			:formConfigs="formConfig" | 			:formConfigs="formConfig" | ||||||
| 			ref="searchBarForm" | 			ref="searchBarForm" | ||||||
|  | 			@select-changed="handleSearchBarChanged" | ||||||
| 			@headBtnClick="buttonClick" /> | 			@headBtnClick="buttonClick" /> | ||||||
| 		<base-table | 		<base-table | ||||||
|  | 			v-if="showData.length" | ||||||
| 			class="right-aside" | 			class="right-aside" | ||||||
| 			v-loading="dataListLoading" | 			v-loading="dataListLoading" | ||||||
| 			:table-props="tableProps" | 			:table-props="tableProps" | ||||||
| 			:table-data="showData" | 			:page="listQuery.pageNo" | ||||||
|  | 			:limit="listQuery.pageSize" | ||||||
| 			:selectWidth="55" | 			:selectWidth="55" | ||||||
|  | 			:table-data="showData" | ||||||
| 			@selection-change="selectChange" | 			@selection-change="selectChange" | ||||||
| 		/> | 		/> | ||||||
|  | 		<div v-else class="no-data-bg"></div> | ||||||
| 		<pagination | 		<pagination | ||||||
| 			:limit.sync="listQuery.pageSize" | 			:limit.sync="listQuery.pageSize" | ||||||
| 			:page.sync="listQuery.pageNo" | 			:page.sync="listQuery.pageNo" | ||||||
| @@ -45,38 +50,31 @@ import html2canvas from 'html2canvas' | |||||||
| const tableProps = [ | const tableProps = [ | ||||||
| 	{ | 	{ | ||||||
|     prop: 'proLineName', |     prop: 'proLineName', | ||||||
| 		label: '产线名称', | 		label: '产线名称' | ||||||
| 		align: 'center', |  | ||||||
| 	}, | 	}, | ||||||
|   { |   { | ||||||
|     prop: 'sectionName', |     prop: 'sectionName', | ||||||
|     label: '工段名称', |     label: '工段名称' | ||||||
|     align: 'center', |  | ||||||
|   }, |   }, | ||||||
|   { |   { | ||||||
|     prop: 'inputNum', |     prop: 'inputNum', | ||||||
|     label: '进片数量/片', |     label: '进片数量/片' | ||||||
|     align: 'center', |  | ||||||
|   }, |   }, | ||||||
|   { |   { | ||||||
|     prop: 'outputNum', |     prop: 'outputNum', | ||||||
|     label: '出片数量/片', |     label: '出片数量/片' | ||||||
|     align: 'center', |  | ||||||
|   }, |   }, | ||||||
|   { |   { | ||||||
|     prop: 'lossNum', |     prop: 'lossNum', | ||||||
|     label: '损耗数量/片', |     label: '损耗数量/片' | ||||||
|     align: 'center', |  | ||||||
|   }, |   }, | ||||||
|   { |   { | ||||||
|     prop: 'lossArea', |     prop: 'lossArea', | ||||||
|     label: '损耗面积/m²', |     label: '损耗面积/m²' | ||||||
|     align: 'center', |  | ||||||
|   }, |   }, | ||||||
|   { |   { | ||||||
|     prop: 'lossRate', |     prop: 'lossRate', | ||||||
|     label: '损耗比例/%', |     label: '损耗比例/%' | ||||||
|     align: 'center', |  | ||||||
|   } |   } | ||||||
| ]; | ]; | ||||||
|  |  | ||||||
| @@ -110,6 +108,7 @@ export default { | |||||||
|           param: 'proLineId', |           param: 'proLineId', | ||||||
| 					defaultSelect: '', | 					defaultSelect: '', | ||||||
| 					filterable: true, | 					filterable: true, | ||||||
|  | 					onchange: true, | ||||||
| 				}, | 				}, | ||||||
| 				{ | 				{ | ||||||
| 					type: 'select', | 					type: 'select', | ||||||
| @@ -132,15 +131,20 @@ export default { | |||||||
| 				}, | 				}, | ||||||
| 				{ | 				{ | ||||||
| 					type: 'button', | 					type: 'button', | ||||||
| 					btnName: '搜索', | 					btnName: '查询', | ||||||
| 					name: 'search', | 					name: 'search', | ||||||
| 					color: 'primary', | 					color: 'primary', | ||||||
| 				}, | 				}, | ||||||
|  | 				{ | ||||||
|  | 					type: 'separate', | ||||||
|  | 				}, | ||||||
| 				{ | 				{ | ||||||
| 					type: 'button', | 					type: 'button', | ||||||
| 					btnName: '导出', | 					btnName: '导出', | ||||||
| 					name: 'export', | 					name: 'export', | ||||||
| 				}, | 					color: 'primary', | ||||||
|  | 					plain: true | ||||||
|  | 				} | ||||||
| 			], | 			], | ||||||
| 		}; | 		}; | ||||||
| 	}, | 	}, | ||||||
| @@ -151,9 +155,39 @@ export default { | |||||||
|     // this.getDataList() |     // this.getDataList() | ||||||
| 	}, | 	}, | ||||||
| 	methods: { | 	methods: { | ||||||
|  | 		/** 根据产线获取工段 */ | ||||||
|  | 		async getWorksectionById(lineId) { | ||||||
|  | 			const { code, data } = await this.$axios({ | ||||||
|  | 				url: '/base/workshop-section/listByParentId', | ||||||
|  | 				method: 'get', | ||||||
|  | 				params: { | ||||||
|  | 					id: lineId, | ||||||
|  | 				}, | ||||||
|  | 			}); | ||||||
|  | 			if (code == 0) { | ||||||
|  | 				this.formConfig[1].selectOptions = data.map((item) => { | ||||||
|  | 					return { | ||||||
|  | 						name: item.name, | ||||||
|  | 						id: item.id, | ||||||
|  | 					}; | ||||||
|  | 				}); | ||||||
|  | 			} | ||||||
|  | 		}, | ||||||
|  | 		handleSearchBarChanged({ param, value }) { | ||||||
|  | 			if (!value) { | ||||||
|  | 				this.formConfig[1].selectOptions = []; | ||||||
|  | 				return; | ||||||
|  | 			} | ||||||
|  | 			switch (param) { | ||||||
|  | 				case 'proLineId': | ||||||
|  | 					this.getWorksectionById(value); | ||||||
|  | 					break; | ||||||
|  | 			} | ||||||
|  | 		}, | ||||||
| 		test() { | 		test() { | ||||||
| 			var target = document.getElementsByClassName("right-aside")[0] | 			var target = document.getElementsByClassName("right-aside")[0] | ||||||
| 			target.style.background = '#FFFFFF' | 			target.style.background = '#FFFFFF' | ||||||
|  | 			var that = this | ||||||
| 			setTimeout(() => { | 			setTimeout(() => { | ||||||
| 				html2canvas(target).then(function(canvas) { | 				html2canvas(target).then(function(canvas) { | ||||||
| 						var contentWidth = canvas.width | 						var contentWidth = canvas.width | ||||||
| @@ -189,7 +223,7 @@ export default { | |||||||
| 							} | 							} | ||||||
| 						} | 						} | ||||||
|  |  | ||||||
| 						pdf.save('工段统计数据查询报表.pdf') | 						pdf.save(that.fileName[0] + '-' + that.fileName[1] + '_工段统计.pdf') | ||||||
| 				}) | 				}) | ||||||
| 			}, 300) | 			}, 300) | ||||||
| 		}, | 		}, | ||||||
| @@ -212,7 +246,7 @@ export default { | |||||||
|       try { |       try { | ||||||
|         FileSaver.saveAs(new Blob([exportTableOut], { |         FileSaver.saveAs(new Blob([exportTableOut], { | ||||||
|           type: 'application/octet-stream' |           type: 'application/octet-stream' | ||||||
|         }), '工段统计数据查询报表.xlsx') |         }), this.fileName[0] + '-' + this.fileName[1] + '_工段统计.xlsx') | ||||||
|       } catch (e) { |       } catch (e) { | ||||||
|         if (typeof console !== 'undefined') console.log(e, exportTableOut) |         if (typeof console !== 'undefined') console.log(e, exportTableOut) | ||||||
|       } |       } | ||||||
| @@ -293,10 +327,9 @@ export default { | |||||||
|           this.listQuery.sectionId = val.sectionId ? val.sectionId : undefined |           this.listQuery.sectionId = val.sectionId ? val.sectionId : undefined | ||||||
|           this.listQuery.startTime = val.timeSlot ? new Date(val.timeSlot[0]).getTime() : undefined |           this.listQuery.startTime = val.timeSlot ? new Date(val.timeSlot[0]).getTime() : undefined | ||||||
|           this.listQuery.endTime = val.timeSlot ? new Date(val.timeSlot[1]).getTime() : undefined |           this.listQuery.endTime = val.timeSlot ? new Date(val.timeSlot[1]).getTime() : undefined | ||||||
| 					this.fileName[0] = val.timeSlot[0] | 					if (val.timeSlot && val.timeSlot.length > 0) { | ||||||
| 					this.fileName[1] = val.timeSlot[1] | 						this.fileName[0] = val.timeSlot[0].slice(0, 10) | ||||||
| 					console.log('wfjmmki文件名称', this.fileName) | 						this.fileName[1] = val.timeSlot[1].slice(0, 10) | ||||||
| 					if (val.timeSlot) { |  | ||||||
|             this.getDataList() |             this.getDataList() | ||||||
|           } else { |           } else { | ||||||
|             this.$message({ |             this.$message({ | ||||||
| @@ -315,7 +348,14 @@ export default { | |||||||
| 					this.getDataList(); | 					this.getDataList(); | ||||||
| 					break; | 					break; | ||||||
| 				case 'export': | 				case 'export': | ||||||
| 					this.handleExport(); | 					if (val.timeSlot && val.timeSlot.length > 0) { | ||||||
|  | 						this.handleExport(); | ||||||
|  |           } else { | ||||||
|  |             this.$message({ | ||||||
|  |               message: '请选择时间', | ||||||
|  |               type: 'warning' | ||||||
|  |             }); | ||||||
|  |           } | ||||||
| 					break; | 					break; | ||||||
| 				default: | 				default: | ||||||
| 					console.log(val); | 					console.log(val); | ||||||
|   | |||||||
| @@ -125,7 +125,31 @@ export default { | |||||||
|       this.$emit('submit', this.queryParams) |       this.$emit('submit', this.queryParams) | ||||||
|     }, |     }, | ||||||
|     exportData() { |     exportData() { | ||||||
|       this.$emit('exportD') |       let name | ||||||
|  |       if (this.queryParams.objId) { | ||||||
|  |         name = this.getObjName(this.objList, this.queryParams.objId) | ||||||
|  |       } else { | ||||||
|  |         this.$modal.msgWarning("对象不能为空") | ||||||
|  |         return false | ||||||
|  |       } | ||||||
|  |       this.$emit('exportD', {name: name}) | ||||||
|  |     }, | ||||||
|  |     // 递归取对象name | ||||||
|  |     getObjName(list, id) { | ||||||
|  |       let _this = this | ||||||
|  |       for (let i = 0; i < list.length; i++) { | ||||||
|  |         let a = list[i] | ||||||
|  |         if (a.id === id) { | ||||||
|  |           return a.name | ||||||
|  |         } else { | ||||||
|  |           if (a.children && a.children.length > 0) { | ||||||
|  |             let res = _this.getObjName(a.children, id) | ||||||
|  |             if (res) { | ||||||
|  |               return res | ||||||
|  |             } | ||||||
|  |           } | ||||||
|  |         } | ||||||
|  |       } | ||||||
|     }, |     }, | ||||||
|     transformTime(timeStamp) {// 本月最后一天 |     transformTime(timeStamp) {// 本月最后一天 | ||||||
|       let year = moment(timeStamp).format('YYYY') |       let year = moment(timeStamp).format('YYYY') | ||||||
|   | |||||||
| @@ -100,9 +100,10 @@ export default { | |||||||
|       } |       } | ||||||
|       this.chartData = this.list |       this.chartData = this.list | ||||||
|     }, |     }, | ||||||
|     exportData() { |     exportData(val) { | ||||||
|       if (this.list.length > 0) { |       if (this.list.length > 0) { | ||||||
|         var wb = XLSX.utils.table_to_book(document.querySelector(".yoy-out-table")) |         var wb = XLSX.utils.table_to_book(document.querySelector(".yoy-out-table")) | ||||||
|  |         let fileName = val.name + "同比分析.xlsx" | ||||||
|         var wbout = XLSX.write(wb, { |         var wbout = XLSX.write(wb, { | ||||||
|             bookType: "xlsx", |             bookType: "xlsx", | ||||||
|             bookSST: true, |             bookSST: true, | ||||||
| @@ -111,7 +112,7 @@ export default { | |||||||
|         try { |         try { | ||||||
|             FileSaver.saveAs( |             FileSaver.saveAs( | ||||||
|             new Blob([wbout], { type: "application/octet-stream" }), |             new Blob([wbout], { type: "application/octet-stream" }), | ||||||
|             "同比分析.xlsx" |             fileName | ||||||
|             ) |             ) | ||||||
|         } catch (e) { |         } catch (e) { | ||||||
|             if (typeof console !== "undefined") console.log(e, wbout); |             if (typeof console !== "undefined") console.log(e, wbout); | ||||||
|   | |||||||
| @@ -43,7 +43,7 @@ export default { | |||||||
| 					eq.okQuantity, | 					eq.okQuantity, | ||||||
| 					eq.nokQuantity, | 					eq.nokQuantity, | ||||||
| 					eq.totalQuantity, | 					eq.totalQuantity, | ||||||
| 					eq.passRate.toFixed(4), | 					eq.passRate?.toFixed(4), | ||||||
| 				]); | 				]); | ||||||
| 			}); | 			}); | ||||||
| 			return { | 			return { | ||||||
|   | |||||||
| @@ -29,7 +29,10 @@ | |||||||
| 							@emitFun="handleEmitFun"></base-table> | 							@emitFun="handleEmitFun"></base-table> | ||||||
| 					</el-tab-pane> | 					</el-tab-pane> | ||||||
| 					<el-tab-pane :label="'\u3000柱状图\u3000'" name="graph"> | 					<el-tab-pane :label="'\u3000柱状图\u3000'" name="graph"> | ||||||
| 						<div v-if="activeName == 'graph'" class="graph" style="height: 40vh; display: flex; flex-direction: column;"> | 						<div | ||||||
|  | 							v-if="activeName == 'graph'" | ||||||
|  | 							class="graph" | ||||||
|  | 							style="height: 40vh; display: flex; flex-direction: column"> | ||||||
| 							<div class="blue-title">各设备加工数量</div> | 							<div class="blue-title">各设备加工数量</div> | ||||||
| 							<LineChart v-if="list && list.length" :list="list" /> | 							<LineChart v-if="list && list.length" :list="list" /> | ||||||
| 							<div v-else class="no-data-bg"></div> | 							<div v-else class="no-data-bg"></div> | ||||||
| @@ -87,6 +90,7 @@ export default { | |||||||
| 					rangeSeparator: '-', | 					rangeSeparator: '-', | ||||||
| 					startPlaceholder: '开始日期', | 					startPlaceholder: '开始日期', | ||||||
| 					endPlaceholder: '结束日期', | 					endPlaceholder: '结束日期', | ||||||
|  | 					defaultTime: ['00:00:00', '23:59:59'], | ||||||
| 					param: 'recordTime', | 					param: 'recordTime', | ||||||
| 					defaultSelect: [ | 					defaultSelect: [ | ||||||
| 						new Date(y, m, d) | 						new Date(y, m, d) | ||||||
| @@ -246,7 +250,9 @@ export default { | |||||||
| 	created() { | 	created() { | ||||||
| 		this.fillLineOptions(); | 		this.fillLineOptions(); | ||||||
| 		this.fillProductOptions(); | 		this.fillProductOptions(); | ||||||
| 		this.getList(); | 	}, | ||||||
|  | 	mounted() { | ||||||
|  | 		this.$refs['search-bar'].headBtnClick('search'); | ||||||
| 	}, | 	}, | ||||||
| 	methods: { | 	methods: { | ||||||
| 		handleTabClick(tab, event) { | 		handleTabClick(tab, event) { | ||||||
| @@ -307,12 +313,16 @@ export default { | |||||||
| 		}, | 		}, | ||||||
|  |  | ||||||
| 		handleSearchBarBtnClick(btn) { | 		handleSearchBarBtnClick(btn) { | ||||||
| 			console.log('handleSearchBarBtnClick', btn); | 			// debugger; | ||||||
| 			switch (btn.btnName) { | 			switch (btn.btnName) { | ||||||
| 				case 'search': | 				case 'search': | ||||||
| 					this.queryParams.lineId = btn.lineId; | 					this.queryParams.lineId = btn.lineId; | ||||||
| 					this.queryParams.productId = btn.productId; | 					this.queryParams.productId = btn.productId; | ||||||
| 					this.queryParams.recordTime = btn.recordTime ? btn.recordTime.map(time => moment(new Date(time)).format('YYYY-MM-DD HH:mm:ss')) : null; | 					this.queryParams.recordTime = btn.recordTime | ||||||
|  | 						? btn.recordTime.map((time) => | ||||||
|  | 								moment(new Date(time)).format('YYYY-MM-DD HH:mm:ss') | ||||||
|  | 						  ) | ||||||
|  | 						: null; | ||||||
| 					this.$nextTick(() => { | 					this.$nextTick(() => { | ||||||
| 						this.getList(); | 						this.getList(); | ||||||
| 					}); | 					}); | ||||||
| @@ -388,7 +398,7 @@ export default { | |||||||
| 	font-size: 14px; | 	font-size: 14px; | ||||||
|  |  | ||||||
| 	&::before { | 	&::before { | ||||||
| 		content: ""; | 		content: ''; | ||||||
| 		position: absolute; | 		position: absolute; | ||||||
| 		left: 0; | 		left: 0; | ||||||
| 		top: 6px; | 		top: 6px; | ||||||
| @@ -398,5 +408,4 @@ export default { | |||||||
| 		background: #0b58ff; | 		background: #0b58ff; | ||||||
| 	} | 	} | ||||||
| } | } | ||||||
|  |  | ||||||
| </style> | </style> | ||||||
|   | |||||||
| @@ -14,7 +14,7 @@ import * as echarts from 'echarts'; | |||||||
|  *  |  *  | ||||||
|  * https://echarts.apache.org/zh/option.html#series-custom.renderItem.arguments.params |  * https://echarts.apache.org/zh/option.html#series-custom.renderItem.arguments.params | ||||||
|  */ |  */ | ||||||
| function renderItem(params, api) { } | // function renderItem(params, api) { } | ||||||
|  |  | ||||||
| export default class Gantt { | export default class Gantt { | ||||||
|     constructor(el) { |     constructor(el) { | ||||||
|   | |||||||
| @@ -74,7 +74,7 @@ | |||||||
|  |  | ||||||
| <script> | <script> | ||||||
| import LineChart from './components/lineChart.vue'; | import LineChart from './components/lineChart.vue'; | ||||||
| import response from './response.json'; | // import response from './response.json'; | ||||||
|  |  | ||||||
| export default { | export default { | ||||||
| 	name: 'SGProduction', | 	name: 'SGProduction', | ||||||
|   | |||||||
| @@ -1,497 +0,0 @@ | |||||||
| <!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: #fff; 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, |  | ||||||
| 				}, |  | ||||||
| 				// {x: 0, y: 0, width: 2000, height: 60 } // <== 也行... |  | ||||||
| 				// 截取矩形 |  | ||||||
| 				{ |  | ||||||
| 					// 截取掉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: end[0] - start[0], |  | ||||||
| 					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: 'item', |  | ||||||
| 				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 ` |  | ||||||
| 						<div style="display: flex; align-items: center; justify-content: space-between"> |  | ||||||
| 						<h1 style="font-size: 18px; font-weight: 600;">${params.seriesName}</h1> |  | ||||||
|                         <h2 style="font-size: 18px; font-weight: 400; letter-spacing: 1px;">${params.name} <span style="display: inline-block; margin-left: 8px; width: 12px; height: 12px; border-radius: 50%; background: ${params.color} "></span></h2> |  | ||||||
|                         </div> |  | ||||||
| 						<div>${new Date(params.value[1]).toLocaleString()} ~ ${new Date(params.value[2]).toLocaleString()}</div> |  | ||||||
|                         ` |  | ||||||
| 				} |  | ||||||
| 			}, |  | ||||||
| 			grid: [ |  | ||||||
| 				{ |  | ||||||
| 					id: 0, |  | ||||||
| 					top: 10, |  | ||||||
| 					left: 128, |  | ||||||
| 					right: 64, |  | ||||||
| 					height: 56, |  | ||||||
| 				}, |  | ||||||
| 				// { |  | ||||||
| 				// 	id: 1, |  | ||||||
| 				// 	top: 80, |  | ||||||
| 				// 	height: 56, |  | ||||||
| 				// }, |  | ||||||
| 				// ***************** 添加第二个grid ***************** |  | ||||||
| 				{ |  | ||||||
| 					id: 1, |  | ||||||
| 					top: 180, |  | ||||||
| 					left: 128, |  | ||||||
| 					right: 64, |  | ||||||
| 					height: 56 |  | ||||||
| 				} |  | ||||||
| 			], |  | ||||||
| 			xAxis: [ |  | ||||||
| 				{ |  | ||||||
| 					id: 'asdf', |  | ||||||
| 					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: 'asdff', |  | ||||||
| 					gridIndex: 0, |  | ||||||
| 					axisLabel: { show: false }, |  | ||||||
| 					axisLine: { show: false }, |  | ||||||
| 				}, |  | ||||||
| 				// ***************** 添加第二个 xAxis ***************** |  | ||||||
| 				{ |  | ||||||
| 					id: 'asdfjk', |  | ||||||
| 					gridIndex: 1, |  | ||||||
| 					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: 'fjkd', |  | ||||||
| 					gridIndex: 1, |  | ||||||
| 					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 }, |  | ||||||
| 				}, |  | ||||||
| 				// ***************** 添加第二个 yAxis ***************** |  | ||||||
| 				{ |  | ||||||
| 					id: 2, |  | ||||||
| 					gridIndex: 1, |  | ||||||
| 					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: 3, |  | ||||||
| 					gridIndex: 1, |  | ||||||
| 					type: 'value', |  | ||||||
| 					splitLine: { show: false }, |  | ||||||
| 					axisLabel: { show: false }, |  | ||||||
| 					axisTick: { show: false }, |  | ||||||
| 				}, |  | ||||||
| 			], |  | ||||||
| 			series: [ |  | ||||||
| 				{ |  | ||||||
| 					// 沉默的背景 |  | ||||||
| 					xAxisIndex: 0, |  | ||||||
| 					yAxisIndex: 0, |  | ||||||
| 					type: 'custom', |  | ||||||
| 					renderItem: renderItem, |  | ||||||
| 					silent: true, |  | ||||||
| 					itemStyle: { |  | ||||||
| 						opacity: 0.8, |  | ||||||
| 					}, |  | ||||||
| 					encode: { |  | ||||||
| 						x: [1, 2], |  | ||||||
| 						y: 0, |  | ||||||
| 					}, |  | ||||||
| 					data: [ |  | ||||||
| 						{ |  | ||||||
| 							name: '无数据', |  | ||||||
| 							value: [0, 1696694400000, 1696780800000, 0], |  | ||||||
| 							tooltip: { show: false }, |  | ||||||
| 							// silent: true, |  | ||||||
| 							// animation: false, |  | ||||||
| 							// universalTransition: { enable: false }, |  | ||||||
| 							// hoverAnimation: false, |  | ||||||
| 							// selectMode: true, |  | ||||||
| 							// select: { disabled: true }, |  | ||||||
| 							// emphasis: { disabled: false, focus: 'none', itemStyle: { opacity: 0 } }, |  | ||||||
| 							// z: 0, |  | ||||||
| 							// zlevel: 0, |  | ||||||
| 							// emphasis: { disabled: true }, |  | ||||||
| 							itemStyle: { |  | ||||||
| 								color: '#ccc', |  | ||||||
| 								opacity: 0.3, |  | ||||||
| 							} |  | ||||||
| 						} |  | ||||||
| 					] |  | ||||||
| 				}, |  | ||||||
| 				{ |  | ||||||
| 					name: '设备1', |  | ||||||
| 					xAxisIndex: 0, |  | ||||||
| 					yAxisIndex: 0, |  | ||||||
| 					type: 'custom', |  | ||||||
| 					renderItem: renderItem, |  | ||||||
| 					itemStyle: { |  | ||||||
| 						opacity: 0.8, |  | ||||||
| 					}, |  | ||||||
| 					encode: { |  | ||||||
| 						x: [1, 2], |  | ||||||
| 						y: 0, |  | ||||||
| 					}, |  | ||||||
| 					data: [ |  | ||||||
| 						{ |  | ||||||
| 							name: '运行', |  | ||||||
| 							value: [0, 1696694400000, 1696699400000, 0], |  | ||||||
| 							itemStyle: { |  | ||||||
| 								normal: { |  | ||||||
| 									color: types[0].color, |  | ||||||
| 								}, |  | ||||||
| 							}, |  | ||||||
| 						}, |  | ||||||
| 						{ |  | ||||||
| 							name: '运行', |  | ||||||
| 							value: [0, 1696730000000, 1696734040450, 0], |  | ||||||
| 							itemStyle: { |  | ||||||
| 								normal: { |  | ||||||
| 									color: types[0].color, |  | ||||||
| 								}, |  | ||||||
| 							}, |  | ||||||
| 						}, |  | ||||||
| 						{ |  | ||||||
| 							name: '故障', |  | ||||||
| 							value: [0, 1696737040000, 1696754040450, 0], |  | ||||||
| 							itemStyle: { |  | ||||||
| 								normal: { |  | ||||||
| 									color: types[1].color, |  | ||||||
| 								}, |  | ||||||
| 							}, |  | ||||||
| 						}, |  | ||||||
| 						{ |  | ||||||
| 							name: '计划停机', |  | ||||||
| 							value: [0, 1696755000000, 1696759000000, 0], |  | ||||||
| 							itemStyle: { |  | ||||||
| 								normal: { |  | ||||||
| 									color: types[2].color, |  | ||||||
| 								}, |  | ||||||
| 							}, |  | ||||||
| 						}, |  | ||||||
| 						{ |  | ||||||
| 							name: '运行', |  | ||||||
| 							value: [0, 1696759000000, 1696769000000, 0], |  | ||||||
| 							itemStyle: { |  | ||||||
| 								normal: { |  | ||||||
| 									color: types[0].color, |  | ||||||
| 								}, |  | ||||||
| 							}, |  | ||||||
| 						}, |  | ||||||
| 						{ |  | ||||||
| 							name: '计划停机', |  | ||||||
| 							value: [0, 1696769400000, 1696779000000, 0], |  | ||||||
| 							itemStyle: { |  | ||||||
| 								normal: { |  | ||||||
| 									color: types[2].color, |  | ||||||
| 								}, |  | ||||||
| 							}, |  | ||||||
| 						}, |  | ||||||
| 					], |  | ||||||
| 				}, |  | ||||||
| 				// ***************** 添加第二个设备 ***************** |  | ||||||
| 				{ |  | ||||||
| 					// 沉默的背景 |  | ||||||
| 					xAxisIndex: 2, |  | ||||||
| 					yAxisIndex: 2, |  | ||||||
| 					type: 'custom', |  | ||||||
| 					renderItem: renderItem, |  | ||||||
| 					silent: true, |  | ||||||
| 					itemStyle: { |  | ||||||
| 						opacity: 0.8, |  | ||||||
| 					}, |  | ||||||
| 					encode: { |  | ||||||
| 						x: [1, 2], |  | ||||||
| 						y: 0, |  | ||||||
| 					}, |  | ||||||
| 					data: [ |  | ||||||
| 						{ |  | ||||||
| 							name: '无数据', |  | ||||||
| 							value: [0, 1696694400000, 1696780800000, 0], |  | ||||||
| 							tooltip: { show: false }, |  | ||||||
| 							// silent: true, |  | ||||||
| 							// animation: false, |  | ||||||
| 							// universalTransition: { enable: false }, |  | ||||||
| 							// hoverAnimation: false, |  | ||||||
| 							// selectMode: true, |  | ||||||
| 							// select: { disabled: true }, |  | ||||||
| 							// emphasis: { disabled: false, focus: 'none', itemStyle: { opacity: 0 } }, |  | ||||||
| 							// z: 0, |  | ||||||
| 							// zlevel: 0, |  | ||||||
| 							// emphasis: { disabled: true }, |  | ||||||
| 							itemStyle: { |  | ||||||
| 								color: '#ccc', |  | ||||||
| 								opacity: 0.3, |  | ||||||
| 							} |  | ||||||
| 						} |  | ||||||
| 					] |  | ||||||
| 				}, |  | ||||||
| 				{ |  | ||||||
| 					name: '设备2', |  | ||||||
| 					xAxisIndex: 2, |  | ||||||
| 					yAxisIndex: 2, |  | ||||||
| 					type: 'custom', |  | ||||||
| 					renderItem: renderItem, |  | ||||||
| 					itemStyle: { |  | ||||||
| 						opacity: 0.8, |  | ||||||
| 					}, |  | ||||||
| 					encode: { |  | ||||||
| 						x: [1, 2], |  | ||||||
| 						y: 0, |  | ||||||
| 					}, |  | ||||||
| 					data: [ |  | ||||||
| 						{ |  | ||||||
| 							name: '运行', |  | ||||||
| 							value: [0, 1696694400000, 1696699400000, 0], |  | ||||||
| 							itemStyle: { |  | ||||||
| 								normal: { |  | ||||||
| 									color: types[0].color, |  | ||||||
| 								}, |  | ||||||
| 							}, |  | ||||||
| 							// showBackground: true, |  | ||||||
| 						}, |  | ||||||
| 						{ |  | ||||||
| 							name: '运行', |  | ||||||
| 							value: [0, 1696730000000, 1696734040450, 0], |  | ||||||
| 							itemStyle: { |  | ||||||
| 								normal: { |  | ||||||
| 									color: types[0].color, |  | ||||||
| 								}, |  | ||||||
| 							}, |  | ||||||
| 						}, |  | ||||||
| 						{ |  | ||||||
| 							name: '故障', |  | ||||||
| 							value: [0, 1696737040000, 1696754040450, 0], |  | ||||||
| 							itemStyle: { |  | ||||||
| 								normal: { |  | ||||||
| 									color: types[1].color, |  | ||||||
| 								}, |  | ||||||
| 							}, |  | ||||||
| 						}, |  | ||||||
| 						{ |  | ||||||
| 							name: '计划停机', |  | ||||||
| 							value: [0, 1696755000000, 1696759000000, 0], |  | ||||||
| 							itemStyle: { |  | ||||||
| 								normal: { |  | ||||||
| 									color: types[2].color, |  | ||||||
| 								}, |  | ||||||
| 							}, |  | ||||||
| 						}, |  | ||||||
| 						{ |  | ||||||
| 							name: '运行', |  | ||||||
| 							value: [0, 1696759000000, 1696769000000, 0], |  | ||||||
| 							itemStyle: { |  | ||||||
| 								normal: { |  | ||||||
| 									color: types[0].color, |  | ||||||
| 								}, |  | ||||||
| 							}, |  | ||||||
| 						}, |  | ||||||
| 						{ |  | ||||||
| 							name: '计划停机', |  | ||||||
| 							value: [0, 1696769400000, 1696779000000, 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> |  | ||||||
		Reference in New Issue
	
	Block a user