Merge pull request 'test' (#47) from test into master

Reviewed-on: #47

.env.dev

@@ -1,7 +1,7 @@
 ###
  # @Author: Do not edit
  # @Date: 2023-08-29 09:40:39
- # @LastEditTime: 2023-09-18 10:44:07
+ # @LastEditTime: 2023-10-16 09:22:52
  # @LastEditors: DY
  # @Description: 
 ### 

src/api/core/base/lineBindProductLog.js

@@ -1,7 +1,7 @@
 /*
  * @Author: Do not edit
  * @Date: 2023-08-28 15:30:53
- * @LastEditTime: 2023-10-13 17:00:20
+ * @LastEditTime: 2023-10-13 17:08:33
  * @LastEditors: DY
  * @Description: 
  */

src/components/DialogForm/index.vue

@@ -10,6 +10,8 @@
 		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">
@@ -46,23 +48,6 @@
 						: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]"
@@ -74,6 +59,43 @@
 						:key="col.key"
 						:is="col.subcomponent"
 						: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-col>
 		</el-row>
@@ -81,6 +103,9 @@
 </template>
 
 <script>
+import { getAccessToken } from '@/utils/auth';
+import tupleImg from '@/assets/images/tuple.png';
+
 /**
  * 找到最长的label
  * @param {*} options
@@ -99,6 +124,48 @@ function findMaxLabelWidth(rows) {
 	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 {
 	name: 'DialogForm',
 	model: {
@@ -106,7 +173,7 @@ export default {
 		event: 'update',
 	},
 	emits: ['update'],
-	components: {},
+	components: { uploadedFile },
 	props: {
 		rows: {
 			type: Array,
@@ -119,14 +186,26 @@ export default {
 		disabled: {
 			type: Boolean,
 			default: false,
-		}
+		},
+		labelPosition: {
+			type: String,
+			default: 'right',
+		},
+		size: {
+			type: String,
+			default: '',
+		},
 	},
 	data() {
 		return {
+			uploadOpen: false,
+			form: {},
 			formLoading: true,
 			optionListOf: {},
 			uploadedFileList: [],
 			dataLoaded: false,
+			uploadHeaders: { Authorization: 'Bearer ' + getAccessToken() },
+			uploadUrl: process.env.VUE_APP_BASE_API + '/admin-api/infra/file/upload', // 上传有关的headers，url都是固定的
 		};
 	},
 	computed: {
@@ -136,16 +215,6 @@ export default {
 			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: {
@@ -158,6 +227,13 @@ export default {
 			deep: true,
 			immediate: false,
 		},
+		dataForm: {
+			handler(val) {
+				this.form = JSON.parse(JSON.stringify(val));
+			},
+			deep: true,
+			immediate: true,
+		},
 	},
 	mounted() {
 		// 处理 options
@@ -273,23 +349,27 @@ export default {
 		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.form.files.push({
+				fileName: file.name,
+				fileUrl: response.data,
+				fileType: 2,
+			});
 			this.$modal.msgSuccess('上传成功');
+			this.$emit('update', this.form);
 		},
 
 		getFileName(fileUrl) {
 			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>
@@ -299,4 +379,52 @@ export default {
 .el-select {
 	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>

src/views/base/equipmentPlcConnect/components/BasicDrawer.vue

@@ -151,7 +151,7 @@ export default {
 				name: '',
 				plcParamName: '',
 				unit: '',
-				collection: '',
+				collection: 1,
 				minValue: '',
 				maxValue: '',
 				defaultValue: '',
@@ -370,7 +370,7 @@ export default {
 				name: '',
 				plcParamName: '',
 				unit: '',
-				collection: '',
+				collection: 1,
 				minValue: '',
 				maxValue: '',
 				defaultValue: '',

src/views/core/analysis/LineChart.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2023-09-13 09:02:25
- * @LastEditTime: 2023-10-08 15:39:38
+ * @LastEditTime: 2023-10-16 14:56:58
  * @LastEditors: DY
  * @Description:
 -->

src/views/core/analysis/balanceAnalysis/index.vue

@@ -1,8 +1,12 @@
 <template>
   <div class="app-container">
     <search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
-    <base-table v-loading="dataListLoading" :span-method="mergeColumnHandler" :table-props="tableProps" :table-data="tableData" />
-    <balance-chart ref="lineChart" />
+    <div v-if="tableData.length">
+      <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
 			:limit.sync="listQuery.pageSize"
 			:page.sync="listQuery.pageNo"
@@ -89,7 +93,7 @@ export default {
         },
         {
           type: 'button',
-          btnName: '搜索',
+          btnName: '查询',
           name: 'search',
           color: 'primary',
         }

src/views/core/analysis/yieldAnalysis/index.vue

@@ -1,8 +1,12 @@
 <template>
   <div class="app-container">
     <search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
-    <base-table v-loading="dataListLoading" :table-props="tableProps" :table-data="tableData" />
-    <line-chart ref="lineChart" />
+    <div v-if="tableData.length">
+      <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
 			:limit.sync="listQuery.pageSize"
 			:page.sync="listQuery.pageNo"
@@ -82,7 +86,7 @@ export default {
 				},
 				{
 					type: 'button',
-					btnName: '搜索',
+					btnName: '查询',
 					name: 'search',
 					color: 'primary',
 				}
@@ -101,6 +105,8 @@ export default {
 			this.optionArrUrl.forEach((item, index) => {
 				item(params).then((response) => {
 					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 = [
           	{
               prop: 'lineName',
-          		label: '产线'
+          		label: '产线',
+              fixed: 'left'
           	},
             {
               prop: 'sum',
-              label: '合计'
+              label: '合计',
+              fixed: 'left'
             },
             {
               prop: res.data ? res.data.nameData[0].name : undefined,

src/views/core/base/equipment/components/AssetsUpload.vue

@@ -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>

src/views/core/base/equipment/components/DialogForm.vue

@@ -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>

src/views/core/base/equipment/components/EquipmentDrawer.vue

@@ -29,23 +29,28 @@
 				<section v-for="(section, index) in sections" :key="section.key">
 					<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 />
-						<DialogForm
+						<EquipmentInfoForm
 							key="drawer-dialog-form"
 							v-if="showForm"
-							ref="form"
-							:dataForm="form"
-							:rows="formRows" />
+							:disabled="mode.includes('detail')"
+							:sync-filelist="syncFileListFlag"
+							v-model="form" />
 					</div>
 
 					<div v-if="section.key == 'attrs'" style="margin-top: 12px">
 						<base-table
 							v-loading="attrListLoading"
 							:table-props="section.props"
-							:page="section.pageNo || 1"
-							:limit="section.pageSize || 10"
+							:page="attrQuery?.params.pageNo || 1"
+							:limit="attrQuery?.params.pageSize || 10"
 							:table-data="list"
+							:add-button-show="mode.includes('detail') ? null : '添加属性'"
+							@emitButtonClick="handleAddAttr"
 							@emitFun="handleEmitFun">
 							<method-btn
 								v-if="section.tableBtn"
@@ -54,27 +59,31 @@
 								:method-list="tableBtn"
 								@clickBtn="handleTableBtnClick" />
 						</base-table>
+
+						<!-- 分页组件 -->
+						<pagination
+							v-show="total > 0"
+							:total="total"
+							:page.sync="attrQuery.params.pageNo"
+							:limit.sync="attrQuery.params.pageSize"
+							@pagination="getAttrList" />
 					</div>
 				</section>
 			</div>
 
 			<div class="drawer-body__footer">
-				<el-button style="margin-right: 10px" @click="handleCancel">
-					返回
-				</el-button>
+				<el-button style="" @click="handleCancel">取消</el-button>
 				<el-button v-if="mode == 'detail'" type="primary" @click="toggleEdit">
 					编辑
 				</el-button>
-				<span v-else>
-					<el-button type="primary" @click="handleSave">保存</el-button>
-					<!-- sections的第二项必须是 属性列表  -->
-					<el-button
+				<el-button v-else type="primary" @click="handleConfirm">确定</el-button>
+				<!-- sections的第二项必须是 属性列表  -->
+				<!-- <el-button
 						v-if="sections[1].allowAdd"
 						type="primary"
 						@click="handleAddAttr">
 						添加属性
-					</el-button>
-				</span>
+					</el-button> -->
 			</div>
 		</div>
 
@@ -99,11 +108,13 @@
 </template>
 
 <script>
-import DialogForm from '@/components/DialogForm';
+import DialogForm from './DialogForm';
+import EquipmentInfoForm from './EquipmentInfoForm.vue';
 
 const SmallTitle = {
 	name: 'SmallTitle',
 	props: ['size'],
+	components: {},
 	data() {
 		return {};
 	},
@@ -127,12 +138,13 @@ const SmallTitle = {
 };
 
 export default {
-	components: { SmallTitle, DialogForm },
+	components: { SmallTitle, DialogForm, EquipmentInfoForm },
 	props: ['sections', 'mode', 'dataId'], // dataId 作为一个通用的存放id的字段
 	data() {
 		return {
 			visible: false,
 			showForm: false,
+			btnLoading: false,
 			total: 0,
 			form: {},
 			list: [],
@@ -161,10 +173,16 @@ export default {
 					},
 				],
 			],
-			attrQuery: null, // 属性列表的请求
+			attrQuery: {
+				params: {
+					pageNo: 1,
+					pageSize: 10,
+				},
+			}, // 属性列表的请求
 			infoQuery: null, // 基本信息的请求
 			attrFormSubmitting: false,
 			attrListLoading: false,
+			syncFileListFlag: null,
 		};
 	},
 	computed: {
@@ -175,15 +193,19 @@ export default {
 						// 重置图片的位置
 						return {
 							...col,
+							bind: {
+								...col.bind,
+							},
 							style: {
 								left: 0,
-								right: 'unset'
-							}
-						}
+								right: 'unset',
+							},
+						};
 					}
 					return {
 						...col,
 						bind: {
+							...col.bind,
 							// 详情 模式下，禁用各种输入
 							disabled: this.mode == 'detail',
 						},
@@ -208,9 +230,52 @@ export default {
 				this.$axios(query).then(({ data }) => {
 					if (section.key == 'base') {
 						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.infoQuery = query;
-						console.log('setting form: ', this.form, data);
 					} else if (section.key == 'attrs') {
 						this.attrQuery = query;
 						this.list = data.list;
@@ -231,6 +296,24 @@ export default {
 					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) {
 			console.log('handleEmitFun', val);
@@ -273,7 +356,7 @@ export default {
 
 		// 开启编辑
 		toggleEdit() {
-			this.mode = 'edit';
+			this.$emit('update-mode', 'edit');
 		},
 
 		// 新增属性
@@ -331,33 +414,44 @@ export default {
 		},
 
 		// 提交属性表
-		async submitAttrForm() {
-			this.$refs['attrForm'].validate((valid) => {
+		submitAttrForm() {
+			this.$refs['attrForm'].validate(async (valid) => {
 				if (!valid) {
 					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) {
-				this.closeAttrForm();
-				this.$message({
-					message: `${isEdit ? '更新' : '创建'}成功`,
-					type: 'success',
-					duration: 1500,
-					onClose: () => {
-						this.getAttrList();
-					},
-				});
-			}
-			this.attrFormSubmitting = false;
+				try {
+					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) {
+						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() {

src/views/core/base/equipment/components/EquipmentInfoForm.vue

@@ -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>

src/views/core/base/equipment/index.vue

@@ -36,13 +36,16 @@
 			:dialogVisible="open"
 			@close="cancel"
 			@cancel="cancel"
+			width="60%"
 			@confirm="submitForm">
 			<DialogForm
 				v-if="open"
 				key="index-dialog-form"
 				ref="form"
+				label-position="top"
+				size="small"
 				:dataForm="form"
-				:rows="rows" />
+				:rows="computedRows" />
 		</base-dialog>
 
 		<!-- 设备 详情 - 编辑 -->
@@ -50,12 +53,13 @@
 			v-if="editVisible"
 			ref="drawer"
 			:mode="editMode"
+			@update-mode="editMode = $event"
 			:data-id="form.id"
 			:sections="[
 				{
 					name: '基本信息',
 					key: 'base',
-					rows: rows,
+					rows: computedRows,
 					url: '/base/equipment/get',
 					urlUpdate: '/base/equipment/update',
 					urlCreate: '/base/equipment/create',
@@ -93,8 +97,8 @@
 				},
 			]"
 			@refreshDataList="getList"
-			@cancel="editVisible = false"
-			@destroy="editVisible = false" />
+			@cancel="cancelEdit"
+			@destroy="cancelEdit" />
 	</div>
 </template>
 
@@ -115,6 +119,7 @@ import {
 	exportEquipmentExcel,
 } from '@/api/base/equipment';
 import Editor from '@/components/Editor';
+import AssetsUpload from './components/AssetsUpload.vue';
 
 export default {
 	name: 'Equipment',
@@ -155,7 +160,7 @@ export default {
 					filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
 				},
 				{ prop: 'name', label: '设备名称' },
-				{ width: 256, prop: 'code', label: '检测编码' },
+				{ width: 256, prop: 'code', label: '设备编码' },
 				{ prop: 'equipmentType', label: '设备类型' },
 				{ prop: 'enName', label: '英文名称' },
 				{ prop: 'abbr', label: '缩写' },
@@ -239,8 +244,6 @@ export default {
 						prop: 'code',
 						url: '/base/equipment/getCode',
 					},
-				],
-				[
 					{
 						input: true,
 						label: '英文名称',
@@ -250,6 +253,8 @@ export default {
 						// 	disabled: true, // some condition, like detail mode...
 						// }
 					},
+				],
+				[
 					{
 						input: true,
 						label: '缩写',
@@ -259,13 +264,15 @@ export default {
 						// 	disabled: true, // some condition, like detail mode...
 						// }
 					},
-				],
-				[
+
 					{
 						select: true,
 						label: '设备类型',
 						prop: 'equipmentTypeId',
 						url: '/base/equipment-type/page?pageNo=1&pageSize=100',
+						bind: {
+							filterable: true,
+						},
 					},
 					// {
 					// 	select: true,
@@ -286,8 +293,6 @@ export default {
 						label: '进厂日期',
 						prop: 'enterTime',
 					},
-				],
-				[
 					{
 						input: true,
 						prop: 'tvalue',
@@ -302,11 +307,14 @@ export default {
 							},
 						],
 					},
+				],
+				[
 					{
 						input: true,
-						label: '产品加工时间',
+						label: '产品加工时间（s）',
 						prop: 'processingTime',
 						rules: [
+							{ required: true, message: '不能为空', trigger: 'blur' },
 							{
 								type: 'number',
 								message: '请输入正确的数字值',
@@ -315,8 +323,7 @@ export default {
 							},
 						],
 					},
-				],
-				[
+
 					{
 						input: true,
 						label: '制造商',
@@ -337,40 +344,79 @@ export default {
 						prop: 'description',
 					},
 				],
-				[
-					{
-						upload: true,
-						label: '上传资料',
-						prop: 'uploadFiles',
-						url: process.env.VUE_APP_BASE_API + '/admin-api/infra/file/upload', // 请求地址
-						bind: {
-							headers: { Authorization: 'Bearer ' + getAccessToken() },
-							'show-file-list': false,
-						},
-					},
-				],
-				[
-					{
-						diy: true,
-						key: 'eq-assets',
-						label: '设备资料',
-						prop: 'fileNames',
-						subcomponent: EquipmentAssets,
-					},
-				],
-				[
-					{
-						diy: true,
-						key: 'eq-pics',
-						label: '设备图片',
-						prop: 'fileUrls',
-						subcomponent: EquipmentPics,
-						pictures: async () => {
-							// some async request
-							return [];
-						},
-					},
-				],
+				// [
+				// 	{
+				// 		assetUpload: true,
+				// 		label: '上传资料',
+				// 		fieldName: 'assets',
+				// 		subcomponent: AssetsUpload
+				// 	},
+				// ],
+				// [
+				// 	{
+				// 		assetUpload: true,
+				// 		label: '上传图片',
+				// 		fieldName: 'images',
+				// 		subcomponent: AssetsUpload
+				// 	},
+				// ],
+				// [
+				// 	{
+				// 		upload: true,
+				// 		label: '上传资料',
+				// 		prop: 'uploadFiles',
+				// 		url: process.env.VUE_APP_BASE_API + '/admin-api/infra/file/upload', // 请求地址
+				// 		uploadFnName: 'assetsUpload', // 上传方法名
+				// 		bind: {
+				// 			headers: { Authorization: 'Bearer ' + getAccessToken() },
+				// 			'show-file-list': false,
+				// 		},
+				// 	},
+				// 	{
+				// 		diy: true,
+				// 		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,
 			editMode: 'edit', // 'edit', 'detail'
@@ -399,11 +445,49 @@ export default {
 			form: {
 				id: null,
 			},
+			showUploadComponents: false, // 是否显示上传组件
 		};
 	},
 	created() {
 		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: {
 		/** 查询列表 */
 		getList() {
@@ -420,6 +504,10 @@ export default {
 			this.open = false;
 			this.reset();
 		},
+		cancelEdit() {
+			this.showUploadComponents = false;
+			this.editVisible = false;
+		},
 		/** 表单重置 */
 		reset() {
 			this.form = {
@@ -445,11 +533,13 @@ export default {
 		handleAdd() {
 			this.reset();
 			this.open = true;
+			this.showUploadComponents = false;
 			this.title = '添加设备';
 		},
 		/** 修改按钮操作 */
 		handleUpdate(row) {
 			this.reset();
+			this.showUploadComponents = true;
 			const id = row.id;
 			getEquipment(id).then((response) => {
 				this.form = response.data;
@@ -516,6 +606,7 @@ export default {
 		viewDetail(id) {
 			this.reset();
 			this.editMode = 'detail';
+			this.showUploadComponents = true;
 			this.form.id = id;
 			this.editVisible = true;
 			this.$nextTick(() => {
@@ -524,11 +615,11 @@ export default {
 		},
 		// overwrite basicPageMixin 里的 处理表格按钮 方法
 		handleTableBtnClick({ data, type }) {
-			console.log('[handleTableBtnClick]', data, type);
 			switch (type) {
 				case 'edit':
 					this.reset();
 					this.editMode = 'edit';
+					this.showUploadComponents = true;
 					this.form.id = data.id;
 					this.editVisible = true;
 					this.$nextTick(() => {

src/views/core/base/equipmentType/index.vue

@@ -37,7 +37,7 @@
 			@close="cancel"
 			@cancel="cancel"
 			@confirm="submitForm">
-			<DialogForm v-if="open" ref="form" :dataForm="form" :rows="rows" />
+			<DialogForm v-if="open" ref="form" v-model="form" :rows="rows" />
 		</base-dialog>
 	</div>
 </template>
@@ -55,7 +55,7 @@ import {
 	exportEquipmentTypeExcel,
 } from '@/api/base/equipmentType';
 
-import { getAccessToken } from '@/utils/auth';
+// import { getAccessToken } from '@/utils/auth';
 
 export default {
 	name: 'EquipmentType',
@@ -86,9 +86,9 @@ export default {
 					width: 180,
 					filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
 				},
-				{ prop: 'name', label: '设备类型名称',  },
-				{ prop: 'code', label: '检测类型编码',  },
-				{ prop: 'remark', label: '备注',  },
+				{ prop: 'name', label: '设备类型名称' },
+				{ prop: 'code', label: '检测类型编码' },
+				{ prop: 'remark', label: '备注' },
 			],
 			searchBarFormConfig: [
 				{
@@ -149,15 +149,13 @@ export default {
 						prop: 'parentId',
 						url: '/base/equipment-type/page?pageNo=1&pageSize=100',
 					},
+					{},
+				],
+				[
 					{
 						upload: true,
 						label: '上传资料',
-						prop: 'uploadFiles',
-						url: process.env.VUE_APP_BASE_API + '/admin-api/infra/file/upload', // 请求地址
-						bind: {
-							headers: { Authorization: 'Bearer ' + getAccessToken() },
-							'show-file-list': false,
-						},
+						prop: 'files',
 					},
 				],
 				[{ input: true, label: '备注', prop: 'remark' }],
@@ -236,6 +234,25 @@ export default {
 			const id = row.id;
 			getEquipmentType(id).then((response) => {
 				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.title = '修改设备类型';
 			});
@@ -267,7 +284,7 @@ export default {
 		handleDelete(row) {
 			const id = row.id;
 			this.$modal
-				.confirm('是否确认删除设备类型编号为"' + id + '"的数据项?')
+				.confirm('是否确认删除设备类型"' + row.name + '"?')
 				.then(function () {
 					return deleteEquipmentType(id);
 				})

src/views/core/base/factory/add-or-updata.vue

@@ -1,8 +1,8 @@
 <!--
  * @Author: zwq
  * @Date: 2021-11-18 14:16:25
- * @LastEditors: zwq
- * @LastEditTime: 2023-08-01 16:59:06
+ * @LastEditors: DY
+ * @LastEditTime: 2023-10-16 11:16:48
  * @Description:
 -->
 <template>
@@ -12,21 +12,30 @@
 		ref="dataForm"
 		@keyup.enter.native="dataFormSubmit()"
 		label-width="80px">
-		<el-form-item label="工厂编码" prop="code">
-			<el-input
-				v-model="dataForm.code"
-				clearable
-				placeholder="请输入工厂编码" />
-		</el-form-item>
-		<el-form-item label="工厂名称" prop="name">
-			<el-input
-				v-model="dataForm.name"
-				clearable
-				placeholder="请输入工厂名称" />
-		</el-form-item>
-		<el-form-item label="地址" prop="address">
-			<el-input v-model="dataForm.address" clearable placeholder="请输入地址" />
-		</el-form-item>
+		<el-row :gutter="20">
+			<el-col :span="12">
+				<el-form-item label="工厂编码" prop="code">
+					<el-input
+						v-model="dataForm.code"
+						clearable
+						placeholder="请输入工厂编码" />
+				</el-form-item>
+			</el-col>
+			<el-col :span="12">
+				<el-form-item label="工厂名称" prop="name">
+					<el-input
+						v-model="dataForm.name"
+						clearable
+						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-select
 				v-model="dataForm.enabled"
@@ -38,9 +47,12 @@
 					:value="dict.value" />
 			</el-select>
 		</el-form-item> -->
-		<el-form-item label="备注" prop="remark">
-			<el-input v-model="dataForm.remark" clearable placeholder="请输入备注" />
-		</el-form-item>
+			<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-form>
 </template>
 

src/views/core/base/factory/index.vue

@@ -29,7 +29,7 @@
 			@cancel="handleCancel"
 			@confirm="handleConfirm"
 			:before-close="handleCancel"
-			width="70%">
+			width="50%">
 			<add-or-update
 				ref="addOrUpdate"
 				@refreshDataList="successSubmit"></add-or-update>

src/views/core/base/lineBindProductLog/index.vue

@@ -28,24 +28,20 @@ import { getProductPage } from '@/api/core/base/product';
 const tableProps = [
 	{
 		prop: 'productionLineName',
-		label: '产线',
-		align: 'center',
+		label: '产线'
 	},
 	{
 		prop: 'productName',
-		label: '在制产品',
-		align: 'center',
+		label: '在制产品'
 	},
 	{
 		prop: 'startTime',
 		label: '开始时间',
-		align: 'center',
 		filter: parseTime,
 	},
 	{
 		prop: 'endTime',
 		label: '结束时间',
-		align: 'center',
 		filter: parseTime,
 	},
 ];
@@ -86,7 +82,8 @@ export default {
 					rangeSeparator: '-',
 					startPlaceholder: '开始时间',
 					endPlaceholder: '结束时间',
-					param: 'createTime',
+					param: 'startTime',
+					valueFormat: 'timestamp'
 				},
 				{
 					type: 'button',
@@ -126,7 +123,7 @@ export default {
 					this.listQuery.pageSize = 10;
 					this.listQuery.productionLineId = val.productionLineId;
 					this.listQuery.productId = val.productId;
-					this.listQuery.createTime = val.createTime;
+					this.listQuery.startTime = val.startTime;
 					this.getDataList();
 					break;
 				case 'reset':

src/views/core/base/product/add-or-updata.vue

@@ -43,7 +43,7 @@
 							<el-form-item label="产品类型" prop="typeDictValue">
 								<el-select
 									v-model="dataForm.typeDictValue"
-                  style="width: 100%"
+									style="width: 100%"
 									:disabled="isdetail"
 									placeholder="请选择产品类型">
 									<el-option
@@ -58,7 +58,7 @@
 							<el-form-item label="单位" prop="unitDictValue">
 								<el-select
 									v-model="dataForm.unitDictValue"
-                  style="width: 100%"
+									style="width: 100%"
 									:disabled="isdetail"
 									placeholder="请选择单位">
 									<el-option
@@ -83,8 +83,8 @@
 							<el-form-item label="单位平方数" prop="area">
 								<el-input
 									:disabled="isdetail"
-                  v-model="dataForm.area"
-                  placeholder="请输入单位平方数" />
+									v-model="dataForm.area"
+									placeholder="请输入单位平方数" />
 							</el-form-item>
 						</el-col>
 					</el-row>
@@ -111,6 +111,8 @@
 						:table-props="tableProps"
 						:page="listQuery.pageNo"
 						:limit="listQuery.pageSize"
+						:add-button-show="isdetail ? null : '添加属性'"
+						@emitButtonClick="addNew()"
 						:table-data="productAttributeList">
 						<method-btn
 							v-if="!isdetail"
@@ -123,15 +125,15 @@
 					<pagination
 						v-show="listQuery.total > 0"
 						:total="listQuery.total"
-						:page.sync="listQuery.current"
-						:limit.sync="listQuery.size"
+						:page.sync="listQuery.pageNo"
+						:limit.sync="listQuery.pageSize"
 						:page-sizes="[5, 10, 15]"
 						@pagination="getList" />
 				</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 v-if="isdetail" type="primary" @click="goEdit()">
 				编辑
@@ -145,6 +147,14 @@
 					添加属性
 				</el-button>
 			</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>
 
 		<product-attr-add
@@ -250,12 +260,12 @@ export default {
 					},
 				],
 				area: [
-					// {
-					// 	type: 'float',
-					// 	message: '单位平方数为浮点类型',
-					// 	trigger: 'blur',
-					// 	transfom: 'val => Float(val)',
-					// },
+					{
+						type: 'number',
+						message: '请输入正确的数值',
+						trigger: 'change',
+						transform: (val) => Number(val),
+					},
 				],
 				processTime: [
 					{
@@ -263,12 +273,12 @@ export default {
 						message: '完成单位产品用时不能为空',
 						trigger: 'blur',
 					},
-					// {
-					// 	type: 'number',
-					// 	message: '完成单位产品用时为浮点类型',
-					// 	trigger: 'blur',
-					// 	transfom: 'val => Number(val)',
-					// },
+					{
+						type: 'number',
+						message: '请输入正确的数值',
+						trigger: 'blur',
+						transform: (val) => Number(val),
+					},
 				],
 			},
 			isdetail: false,
@@ -277,6 +287,7 @@ export default {
 	methods: {
 		initData() {
 			this.productAttributeList.splice(0);
+			this.listQuery.total = 0;
 		},
 		init(id, isdetail) {
 			this.initData();
@@ -304,12 +315,10 @@ export default {
 
 		getList() {
 			// 获取产品的属性列表
-			const params = {
-				pageSize: 10,
-				pageNo: 1,
+			getProductAttrPage({
+				...this.listQuery,
 				productId: this.dataForm.id,
-			};
-			getProductAttrPage(params).then((response) => {
+			}).then((response) => {
 				this.productAttributeList = response.data.list;
 				this.listQuery.total = response.data.total;
 			});
@@ -390,6 +399,8 @@ export default {
 <style scoped>
 .drawer >>> .el-drawer {
 	border-radius: 8px 0 0 8px;
+	display: flex;
+	flex-direction: column;
 }
 
 .drawer >>> .el-form-item__label {
@@ -400,14 +411,20 @@ export default {
 	margin: 0;
 	padding: 32px 32px 24px;
 	border-bottom: 1px solid #dcdfe6;
-	margin-bottom: 30px;
+}
+.drawer >>> .el-drawer__body {
+	flex: 1;
+	height: 1px;
+	display: flex;
+	flex-direction: column;
 }
 
 .drawer >>> .content {
-	padding: 0 24px 30px;
+	padding: 30px 24px;
+	flex: 1;
 	display: flex;
 	flex-direction: column;
-	height: 100%;
+	/* height: 100%; */
 }
 
 .drawer >>> .visual-part {
@@ -422,4 +439,10 @@ export default {
 .drawer >>> .attr-list {
 	padding: 0 16px;
 }
+
+.drawer-body__footer {
+	display: flex;
+	justify-content: flex-end;
+	padding: 18px;
+}
 </style>

src/views/core/base/productionLine/add-or-updata.vue

@@ -7,53 +7,84 @@
 -->
 <template>
 	<el-form
+		class="dialog-inner__form"
 		:model="dataForm"
 		:rules="dataRule"
 		ref="dataForm"
 		@keyup.enter.native="dataFormSubmit()"
 		label-width="90px">
-		<el-form-item label="产线编码" prop="code">
-			<el-input
-				v-model="dataForm.code"
-				clearable
-				placeholder="请输入产线编码" />
-		</el-form-item>
-		<el-form-item label="产线名称" prop="name">
-			<el-input
-				v-model="dataForm.name"
-				clearable
-				placeholder="请输入产线名称" />
-		</el-form-item>
-    <el-form-item prop="factoryId" label="工厂名称">
-      <el-select
-      v-model="dataForm.factoryId" filterable clearable placeholder="请选择工厂">
-        <el-option
-          v-for="item in urlOptions.optionArr.arr0"
-          :key="item.id"
-          :label="item.name"
-          :value="item.id"
-        >
-        </el-option>
-      </el-select>
-    </el-form-item>
-		<el-form-item label="产线TT值(h)" prop="tvalue">
-			<el-input v-model="dataForm.tvalue" clearable placeholder="请输入每小时下片数量" />
-		</el-form-item>
-		<el-form-item label="额外编码" prop="externalCode">
-			<el-input
-				v-model="dataForm.externalCode"
-				clearable
-				placeholder="请输入额外编码" />
-		</el-form-item>
-		<el-form-item label="描述" prop="description">
-			<el-input
-				v-model="dataForm.description"
-				type="textarea"
-				placeholder="请输入内容" />
-		</el-form-item>
-		<el-form-item label="备注" prop="remark">
-			<el-input v-model="dataForm.remark" clearable placeholder="请输入备注" />
-		</el-form-item>
+		<el-row :gutter="20">
+			<el-col :span="12">
+				<el-form-item label="产线编码" prop="code">
+					<el-input
+						v-model="dataForm.code"
+						clearable
+						placeholder="请输入产线编码" />
+				</el-form-item>
+			</el-col>
+			<el-col :span="12">
+				<el-form-item label="产线名称" prop="name">
+					<el-input
+						v-model="dataForm.name"
+						clearable
+						placeholder="请输入产线名称" />
+				</el-form-item>
+			</el-col>
+		</el-row>
+		<el-row :gutter="20">
+			<el-col :span="12">
+				<el-form-item prop="factoryId" label="工厂名称">
+					<el-select
+						v-model="dataForm.factoryId"
+						filterable
+						clearable
+						placeholder="请选择工厂">
+						<el-option
+							v-for="item in urlOptions.optionArr.arr0"
+							:key="item.id"
+							:label="item.name"
+							:value="item.id"></el-option>
+					</el-select>
+				</el-form-item>
+			</el-col>
+			<el-col :span="12">
+				<el-form-item label="产线TT值(h)" prop="tvalue">
+					<el-input
+						v-model="dataForm.tvalue"
+						clearable
+						placeholder="请输入每小时下片数量" />
+				</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>
 </template>
 
@@ -65,22 +96,20 @@ import {
 	getProductionLine,
 	getCode,
 } from '@/api/core/base/productionLine';
-import {
-	getFactoryPage,
-} from '@/api/core/base/factory';
+import { getFactoryPage } from '@/api/core/base/factory';
 
 export default {
 	mixins: [basicAdd],
 	data() {
 		return {
 			urlOptions: {
-        getOption: true,
-			  isGetCode: true,
-        codeURL: getCode,
+				getOption: true,
+				isGetCode: true,
+				codeURL: getCode,
 				createURL: createProductionLine,
 				updateURL: updateProductionLine,
 				infoURL: getProductionLine,
-        optionArrUrl: [getFactoryPage],
+				optionArrUrl: [getFactoryPage],
 			},
 			dataForm: {
 				id: undefined,
@@ -99,13 +128,26 @@ export default {
 				name: [
 					{ required: true, message: '产线名称不能为空', trigger: 'blur' },
 				],
-        factoryId: [
+				factoryId: [
 					{ required: true, message: '工厂不能为空', trigger: 'change' },
 				],
+				tvalue: [
+					{
+						type: 'number',
+						message: '请输入正确的数字',
+						trigger: 'change',
+						transform: (val) => Number(val),
+					},
+				],
 			},
 		};
 	},
-	methods: {
-	},
+	methods: {},
 };
 </script>
+
+<style scoped>
+.dialog-inner__form >>> .el-select {
+	width: 100%;
+}
+</style>

src/views/core/base/productionLine/index.vue

@@ -29,7 +29,7 @@
 			@cancel="handleCancel"
 			@confirm="handleConfirm"
 			:before-close="handleCancel"
-			width="70%">
+			width="50%">
 			<add-or-update
 				ref="addOrUpdate"
 				@refreshDataList="successSubmit"></add-or-update>

src/views/core/base/workshopSection/add-or-updata.vue

@@ -2,7 +2,7 @@
  * @Author: zwq
  * @Date: 2023-08-01 13:52:10
  * @LastEditors: DY
- * @LastEditTime: 2023-09-21 10:48:54
+ * @LastEditTime: 2023-10-16 13:40:00
  * @Description:
 -->
 <template>
@@ -12,33 +12,45 @@
 		ref="dataForm"
 		@keyup.enter.native="dataFormSubmit()"
 		label-width="90px">
-		<el-form-item label="工段编码" prop="code">
-			<el-input
-				v-model="dataForm.code"
-				clearable
-				placeholder="请输入工段编码" />
-		</el-form-item>
-		<el-form-item label="工段名称" prop="name">
-			<el-input
-				v-model="dataForm.name"
-				clearable
-				placeholder="请输入工段名称" />
-		</el-form-item>
-    <el-form-item prop="productionLineId" label="产线">
-      <el-select
-      v-model="dataForm.productionLineId" filterable clearable placeholder="请选择产线">
-        <el-option
-          v-for="item in urlOptions.optionArr.arr0"
-          :key="item.id"
-          :label="item.name"
-          :value="item.id"
-        >
-        </el-option>
-      </el-select>
-    </el-form-item>
-		<el-form-item label="排序" prop="sort">
-			<el-input-number v-model="dataForm.sort" :min="1" :max="100" clearable placeholder="请输入排序" />
-		</el-form-item>
+		<el-row :gutter="20">
+			<el-col :span="12">
+				<el-form-item label="工段编码" prop="code">
+					<el-input
+						v-model="dataForm.code"
+						clearable
+						placeholder="请输入工段编码" />
+				</el-form-item>
+			</el-col>
+			<el-col :span="12">
+				<el-form-item label="工段名称" prop="name">
+					<el-input
+						v-model="dataForm.name"
+						clearable
+						placeholder="请输入工段名称" />
+				</el-form-item>
+			</el-col>
+		</el-row>
+		<el-row :gutter="20">
+			<el-col :span="12">
+				<el-form-item prop="productionLineId" label="产线">
+					<el-select
+					v-model="dataForm.productionLineId" filterable clearable placeholder="请选择产线">
+						<el-option
+							v-for="item in urlOptions.optionArr.arr0"
+							:key="item.id"
+							: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-input v-model="dataForm.remark" clearable placeholder="请输入备注" />
 		</el-form-item>

src/views/core/base/workshopSection/index.vue

@@ -29,7 +29,7 @@
 			@cancel="handleCancel"
 			@confirm="handleConfirm"
 			:before-close="handleCancel"
-			width="70%">
+			width="50%">
 			<add-or-update
 				ref="addOrUpdate"
 				@refreshDataList="successSubmit"></add-or-update>
@@ -50,34 +50,28 @@ import {
 const tableProps = [
 	{
 		prop: 'code',
-		label: '工段编码',
-		align: 'center',
+		label: '工段编码'
 	},
 	{
 		prop: 'name',
-		label: '工段名称',
-		align: 'center',
+		label: '工段名称'
 	},
 	{
 		prop: 'productionLineName',
-		label: '产线',
-		align: 'center',
+		label: '产线'
 	},
 	{
 		prop: 'sort',
-		label: '排序',
-		align: 'center',
+		label: '排序'
 	},
 	{
 		prop: 'remark',
-		label: '备注',
-		align: 'center',
+		label: '备注'
 	},
 	{
 		prop: 'createTime',
 		label: '创建时间',
-		align: 'center',
-		filter: parseTime,
+		filter: parseTime
 	},
 ];
 
@@ -119,14 +113,14 @@ export default {
 					name: 'search',
 					color: 'primary',
 				},
-				{
-					type: 'separate',
-				},
-				{
-					type: 'button',
-					btnName: '重置',
-					name: 'reset',
-				},
+				// {
+				// 	type: 'separate',
+				// },
+				// {
+				// 	type: 'button',
+				// 	btnName: '重置',
+				// 	name: 'reset',
+				// },
 				{
 					type: 'separate',
 				},

src/views/core/monitoring/auto/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: Do not edit
  * @Date: 2023-08-29 14:59:29
- * @LastEditTime: 2023-10-13 11:03:11
+ * @LastEditTime: 2023-10-16 15:10:42
  * @LastEditors: DY
  * @Description: 
 -->
@@ -12,6 +12,7 @@
 			ref="searchBarForm"
 			@headBtnClick="buttonClick" />
 		<base-table
+			v-if="showData.length"
 			class="right-aside"
 			v-loading="dataListLoading"
 			:table-props="tableProps"
@@ -22,6 +23,7 @@
 			@selection-change="selectChange"
 			>
 		</base-table>
+		<div v-else class="no-data-bg"></div>
 		<pagination
 			:limit.sync="listQuery.pageSize"
 			:page.sync="listQuery.pageNo"
@@ -195,7 +197,8 @@ export default {
 					type: 'button',
 					btnName: '导出',
 					name: 'export',
-					color: 'warning',
+					color: 'primary',
+					plain: true
 				}
 			],
 		};

src/views/core/monitoring/data/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: Do not edit
  * @Date: 2023-08-29 14:59:29
- * @LastEditTime: 2023-10-13 11:00:59
+ * @LastEditTime: 2023-10-16 15:18:23
  * @LastEditors: DY
  * @Description: 
 -->
@@ -12,6 +12,7 @@
 			ref="searchBarForm"
 			@headBtnClick="buttonClick" />
 		<base-table
+			v-if="showData.length"
 			class="right-aside"
 			v-loading="dataListLoading"
 			:table-props="tableProps"
@@ -29,6 +30,7 @@
 				:method-list="tableBtn"
 				@clickBtn="handleClick" />
 		</base-table>
+		<div v-else class="no-data-bg"></div>
 		<pagination
 			:limit.sync="listQuery.pageSize"
 			:page.sync="listQuery.pageNo"
@@ -145,7 +147,8 @@ export default {
 					type: 'button',
 					btnName: '导出',
 					name: 'export',
-					color: 'warning',
+					color: 'primary',
+					plain: true
 				}
 			],
 		};

src/views/core/monitoring/data24/index.vue

@@ -11,13 +11,14 @@
 			ref="search-bar" />
 		<el-skeleton v-if="initing" :rows="6" animated />
 		<!-- :span-method="mergeColumnHandler" -->
+		<div v-else :class="{ 'no-data-bg': !tableData || tableData.length == 0 }">
 		<base-table
-			v-else
+		v-if="tableData && tableData.length > 0"
 			:table-props="tableProps"
 			:table-data="tableData"
-			@emitFun="handleEmitFun"></base-table>
-		<!-- :page="queryParams.pageNo"
-			:limit="queryParams.pageSize" -->
+			@emitFun="handleEmitFun"
+		/>
+		</div>
 	</div>
 </template>
 
@@ -65,10 +66,10 @@ export default {
 						label: times.slice(0, 10) + ' ' + times.slice(11),
 						align: 'center',
 						children: [
-							{ prop: times + '_in', label: '投入数量', align: 'center' },
-							{ prop: times + '_out', label: '产出数量', align: 'center' },
-							{ prop: times + '_junk', label: '报废数量', align: 'center' },
-							{ prop: times + '_area', label: '产出面积', align: 'center' }
+							{ prop: times + '_in', label: '投入数量' },
+							{ prop: times + '_out', label: '产出数量' },
+							{ prop: times + '_junk', label: '报废数量' },
+							{ prop: times + '_area', label: '产出面积' }
 						]
 					}
 					this.arr.push(subprop)
@@ -149,14 +150,14 @@ export default {
           {
             prop: 'proLineName',
             label: '生产线',
-            align: 'center',
-						fixed: 'left'
+						fixed: 'left',
+						showOverflowTooltip: true
           },
           {
             prop: 'spec',
             label: '产品规格',
-            align: 'center',
-						fixed: 'left'
+						fixed: 'left',
+						showOverflowTooltip: true
           }
 				]
 				this.buildProps(res.data.nameData);

src/views/core/monitoring/sectionStatistics/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: Do not edit
  * @Date: 2023-08-29 14:59:29
- * @LastEditTime: 2023-10-13 11:03:43
+ * @LastEditTime: 2023-10-16 15:19:04
  * @LastEditors: DY
  * @Description: 
 -->
@@ -13,6 +13,7 @@
 			ref="searchBarForm"
 			@headBtnClick="buttonClick" />
 		<base-table
+			v-if="showData.length"
 			class="right-aside"
 			v-loading="dataListLoading"
 			:table-props="tableProps"
@@ -30,6 +31,7 @@
 				:method-list="tableBtn"
 				@clickBtn="handleClick" />
 		</base-table>
+		<div v-else class="no-data-bg"></div>
 		<pagination
 			:limit.sync="listQuery.pageSize"
 			:page.sync="listQuery.pageNo"
@@ -188,7 +190,8 @@ export default {
 					type: 'button',
 					btnName: '导出',
 					name: 'export',
-					color: 'warning',
+					color: 'primary',
+					plain: true
 				}
 			],
 		};

src/views/core/monitoring/sectionStatisticsSearch/index.vue

@@ -6,13 +6,17 @@
 			@select-changed="handleSearchBarChanged"
 			@headBtnClick="buttonClick" />
 		<base-table
+			v-if="showData.length"
 			class="right-aside"
 			v-loading="dataListLoading"
 			:table-props="tableProps"
-			:table-data="showData"
+			:page="listQuery.pageNo"
+			:limit="listQuery.pageSize"
 			:selectWidth="55"
+			:table-data="showData"
 			@selection-change="selectChange"
 		/>
+		<div v-else class="no-data-bg"></div>
 		<pagination
 			:limit.sync="listQuery.pageSize"
 			:page.sync="listQuery.pageNo"
@@ -46,38 +50,31 @@ import html2canvas from 'html2canvas'
 const tableProps = [
 	{
     prop: 'proLineName',
-		label: '产线名称',
-		align: 'center',
+		label: '产线名称'
 	},
   {
     prop: 'sectionName',
-    label: '工段名称',
-    align: 'center',
+    label: '工段名称'
   },
   {
     prop: 'inputNum',
-    label: '进片数量/片',
-    align: 'center',
+    label: '进片数量/片'
   },
   {
     prop: 'outputNum',
-    label: '出片数量/片',
-    align: 'center',
+    label: '出片数量/片'
   },
   {
     prop: 'lossNum',
-    label: '损耗数量/片',
-    align: 'center',
+    label: '损耗数量/片'
   },
   {
     prop: 'lossArea',
-    label: '损耗面积/m²',
-    align: 'center',
+    label: '损耗面积/m²'
   },
   {
     prop: 'lossRate',
-    label: '损耗比例/%',
-    align: 'center',
+    label: '损耗比例/%'
   }
 ];
 
@@ -134,15 +131,20 @@ export default {
 				},
 				{
 					type: 'button',
-					btnName: '搜索',
+					btnName: '查询',
 					name: 'search',
 					color: 'primary',
 				},
+				{
+					type: 'separate',
+				},
 				{
 					type: 'button',
 					btnName: '导出',
 					name: 'export',
-				},
+					color: 'primary',
+					plain: true
+				}
 			],
 		};
 	},

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

@@ -43,7 +43,7 @@ export default {
 					eq.okQuantity,
 					eq.nokQuantity,
 					eq.totalQuantity,
-					eq.passRate.toFixed(4),
+					eq.passRate?.toFixed(4),
 				]);
 			});
 			return {

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

@@ -29,7 +29,10 @@
 							@emitFun="handleEmitFun"></base-table>
 					</el-tab-pane>
 					<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>
 							<LineChart v-if="list && list.length" :list="list" />
 							<div v-else class="no-data-bg"></div>
@@ -87,6 +90,7 @@ export default {
 					rangeSeparator: '-',
 					startPlaceholder: '开始日期',
 					endPlaceholder: '结束日期',
+					defaultTime: ['00:00:00', '23:59:59'],
 					param: 'recordTime',
 					defaultSelect: [
 						new Date(y, m, d)
@@ -246,7 +250,9 @@ export default {
 	created() {
 		this.fillLineOptions();
 		this.fillProductOptions();
-		this.getList();
+	},
+	mounted() {
+		this.$refs['search-bar'].headBtnClick('search');
 	},
 	methods: {
 		handleTabClick(tab, event) {
@@ -307,12 +313,16 @@ export default {
 		},
 
 		handleSearchBarBtnClick(btn) {
-			console.log('handleSearchBarBtnClick', btn);
+			// debugger;
 			switch (btn.btnName) {
 				case 'search':
 					this.queryParams.lineId = btn.lineId;
 					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.getList();
 					});
@@ -388,7 +398,7 @@ export default {
 	font-size: 14px;
 
 	&::before {
-		content: "";
+		content: '';
 		position: absolute;
 		left: 0;
 		top: 6px;
@@ -398,5 +408,4 @@ export default {
 		background: #0b58ff;
 	}
 }
-
 </style>

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

@@ -74,7 +74,7 @@
 
 <script>
 import LineChart from './components/lineChart.vue';
-import response from './response.json';
+// import response from './response.json';
 
 export default {
 	name: 'SGProduction',

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

@@ -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>