Compare commits
	
		
			25 Commits
		
	
	
		
			03c573d5b2
			...
			projects/l
		
	
	| 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
 | 
			
		||||
 # @Date: 2023-08-29 09:40:39
 | 
			
		||||
 # @LastEditTime: 2023-09-18 10:44:07
 | 
			
		||||
 # @LastEditTime: 2023-10-16 09:22:52
 | 
			
		||||
 # @LastEditors: DY
 | 
			
		||||
 # @Description: 
 | 
			
		||||
### 
 | 
			
		||||
 
 | 
			
		||||
@@ -75,7 +75,7 @@
 | 
			
		||||
    "vue-count-to": "1.0.13",
 | 
			
		||||
    "vue-cropper": "0.5.8",
 | 
			
		||||
    "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-router": "3.4.9",
 | 
			
		||||
    "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'
 | 
			
		||||
 | 
			
		||||
// 创建产线目前生产产品表 主要为更新
 | 
			
		||||
@@ -35,11 +42,11 @@ export function getLineBindProductLog(id) {
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
// 获得产线目前生产产品表 主要为更新分页
 | 
			
		||||
export function getLineBindProductLogPage(query) {
 | 
			
		||||
export function getLineBindProductLogPage(data) {
 | 
			
		||||
  return request({
 | 
			
		||||
    url: '/base/line-bind-product-log/page',
 | 
			
		||||
    method: 'get',
 | 
			
		||||
    params: query
 | 
			
		||||
    method: 'post',
 | 
			
		||||
    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"
 | 
			
		||||
		: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>
 | 
			
		||||
 
 | 
			
		||||
@@ -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: '',
 | 
			
		||||
 
 | 
			
		||||
@@ -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:
 | 
			
		||||
-->
 | 
			
		||||
 
 | 
			
		||||
@@ -1,8 +1,12 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <div class="app-container">
 | 
			
		||||
    <search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
 | 
			
		||||
    <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',
 | 
			
		||||
        }
 | 
			
		||||
@@ -144,11 +148,6 @@ export default {
 | 
			
		||||
      // this.listQuery.lineId = '1672847052717821953'
 | 
			
		||||
      // this.listQuery.startTime = '1693497600000';
 | 
			
		||||
      // 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 => {
 | 
			
		||||
        console.log(res)
 | 
			
		||||
        let arr = [
 | 
			
		||||
@@ -228,11 +227,17 @@ export default {
 | 
			
		||||
          this.listQuery.lineId = val.lineIds
 | 
			
		||||
          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;
 | 
			
		||||
          if (val.time) {
 | 
			
		||||
          if (val.time && val.lineIds) {
 | 
			
		||||
            this.tableData = []
 | 
			
		||||
            this.xData = []
 | 
			
		||||
            this.yData = []
 | 
			
		||||
            this.tableProps = []
 | 
			
		||||
            this.spanArr = []
 | 
			
		||||
            this.timeList = []
 | 
			
		||||
            this.getData()
 | 
			
		||||
          } else {
 | 
			
		||||
            this.$message({
 | 
			
		||||
              message: '请选择时间',
 | 
			
		||||
              message: '请选择产线和时间',
 | 
			
		||||
              type: 'warning'
 | 
			
		||||
            });
 | 
			
		||||
          }
 | 
			
		||||
 
 | 
			
		||||
@@ -1,8 +1,12 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <div class="app-container">
 | 
			
		||||
    <search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
 | 
			
		||||
    <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"
 | 
			
		||||
@@ -72,7 +76,7 @@ export default {
 | 
			
		||||
				{
 | 
			
		||||
					type: 'datePicker',
 | 
			
		||||
					label: '时间',
 | 
			
		||||
					dateType: 'datetime',
 | 
			
		||||
					dateType: 'month',
 | 
			
		||||
					format: 'yyyy-MM-dd',
 | 
			
		||||
					valueFormat: 'yyyy-MM-dd HH:mm:ss',
 | 
			
		||||
					rangeSeparator: '-',
 | 
			
		||||
@@ -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,
 | 
			
		||||
@@ -220,7 +228,6 @@ export default {
 | 
			
		||||
      });
 | 
			
		||||
    },
 | 
			
		||||
    buttonClick(val) {
 | 
			
		||||
      // console.log(val)
 | 
			
		||||
			switch (val.btnName) {
 | 
			
		||||
        case 'search':
 | 
			
		||||
          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">
 | 
			
		||||
					<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>
 | 
			
		||||
				<el-button v-else type="primary" @click="handleConfirm">确定</el-button>
 | 
			
		||||
				<!-- sections的第二项必须是 属性列表  -->
 | 
			
		||||
					<el-button
 | 
			
		||||
				<!-- <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,17 +414,19 @@ 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);
 | 
			
		||||
 | 
			
		||||
				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,
 | 
			
		||||
						url: isEdit
 | 
			
		||||
							? this.sections[1].urlUpdate
 | 
			
		||||
							: this.sections[1].urlCreate,
 | 
			
		||||
						method: isEdit ? 'put' : 'post',
 | 
			
		||||
						data: this.attrForm,
 | 
			
		||||
					});
 | 
			
		||||
@@ -358,6 +443,15 @@ export default {
 | 
			
		||||
						});
 | 
			
		||||
					}
 | 
			
		||||
					this.attrFormSubmitting = false;
 | 
			
		||||
				} catch (err) {
 | 
			
		||||
					this.$message({
 | 
			
		||||
						message: err,
 | 
			
		||||
						type: 'error',
 | 
			
		||||
						duration: 1500,
 | 
			
		||||
					});
 | 
			
		||||
					this.attrFormSubmitting = false;
 | 
			
		||||
				}
 | 
			
		||||
			});
 | 
			
		||||
		},
 | 
			
		||||
 | 
			
		||||
		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"
 | 
			
		||||
			@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(() => {
 | 
			
		||||
 
 | 
			
		||||
@@ -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);
 | 
			
		||||
				})
 | 
			
		||||
 
 | 
			
		||||
@@ -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-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-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>
 | 
			
		||||
 | 
			
		||||
 
 | 
			
		||||
@@ -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>
 | 
			
		||||
 
 | 
			
		||||
@@ -2,15 +2,14 @@
 | 
			
		||||
 * @Author: zwq
 | 
			
		||||
 * @Date: 2023-08-02 15:12:42
 | 
			
		||||
 * @LastEditors: DY
 | 
			
		||||
 * @LastEditTime: 2023-10-10 16:49:03
 | 
			
		||||
 * @LastEditTime: 2023-10-13 16:35:03
 | 
			
		||||
 * @Description:
 | 
			
		||||
-->
 | 
			
		||||
<template>
 | 
			
		||||
	<div class="app-container">
 | 
			
		||||
		<search-bar
 | 
			
		||||
			:formConfigs="formConfig"
 | 
			
		||||
			ref="searchBarForm"
 | 
			
		||||
			@headBtnClick="buttonClick" />
 | 
			
		||||
			:formConfigs="[{ label: '产线在制产品', type: 'title' }]"
 | 
			
		||||
			ref="searchBarForm" />
 | 
			
		||||
		<base-table
 | 
			
		||||
			v-loading="dataListLoading"
 | 
			
		||||
			:table-props="tableProps"
 | 
			
		||||
@@ -36,20 +35,17 @@ import { getProductPage } from '@/api/core/base/product';
 | 
			
		||||
const tableProps = [
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'lineName',
 | 
			
		||||
		label: '产线',
 | 
			
		||||
		align: 'center',
 | 
			
		||||
		label: '产线'
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'productName',
 | 
			
		||||
		label: '在制产品',
 | 
			
		||||
		align: 'center',
 | 
			
		||||
		list: [],
 | 
			
		||||
		subcomponent: selectProduct,
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'recordTime',
 | 
			
		||||
		label: '开始时间',
 | 
			
		||||
		align: 'center',
 | 
			
		||||
		filter: parseTime,
 | 
			
		||||
	},
 | 
			
		||||
];
 | 
			
		||||
@@ -63,14 +59,14 @@ export default {
 | 
			
		||||
			},
 | 
			
		||||
			tableProps,
 | 
			
		||||
			tableData: [],
 | 
			
		||||
			formConfig: [
 | 
			
		||||
				{
 | 
			
		||||
					type: 'button',
 | 
			
		||||
					btnName: '同步',
 | 
			
		||||
					name: 'search',
 | 
			
		||||
					color: 'primary',
 | 
			
		||||
				},
 | 
			
		||||
			],
 | 
			
		||||
			// formConfig: [
 | 
			
		||||
			// 	{
 | 
			
		||||
			// 		type: 'button',
 | 
			
		||||
			// 		btnName: '同步',
 | 
			
		||||
			// 		name: 'search',
 | 
			
		||||
			// 		color: 'primary',
 | 
			
		||||
			// 	},
 | 
			
		||||
			// ],
 | 
			
		||||
		};
 | 
			
		||||
	},
 | 
			
		||||
	components: {},
 | 
			
		||||
 
 | 
			
		||||
@@ -2,12 +2,11 @@
 | 
			
		||||
 * @Author: zwq
 | 
			
		||||
 * @Date: 2023-08-03 14:09:18
 | 
			
		||||
 * @LastEditors: DY
 | 
			
		||||
 * @LastEditTime: 2023-10-10 16:54:09
 | 
			
		||||
 * @LastEditTime: 2023-10-13 16:47:25
 | 
			
		||||
 * @Description:
 | 
			
		||||
-->
 | 
			
		||||
<template>
 | 
			
		||||
	<div class="tableInner">
 | 
			
		||||
		<el-input readonly v-model="list.productName" style="width: 50%;" ></el-input>
 | 
			
		||||
		<el-popover
 | 
			
		||||
    placement="top"
 | 
			
		||||
    title="切换在制产品"
 | 
			
		||||
@@ -28,8 +27,11 @@
 | 
			
		||||
					确定
 | 
			
		||||
				</el-button>
 | 
			
		||||
			</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-input readonly v-model="list.productName" style="width: 50%;margin-left: 5px" ></el-input>
 | 
			
		||||
	</div>
 | 
			
		||||
</template>
 | 
			
		||||
<script>
 | 
			
		||||
@@ -61,6 +63,7 @@ export default {
 | 
			
		||||
			switchLineBindProduct(data).then((response) => {
 | 
			
		||||
				this.$modal.msgSuccess('修改成功');
 | 
			
		||||
				this.visible = false;
 | 
			
		||||
				this.list.productName = this.list.string.split('+')[1]
 | 
			
		||||
				this.$emit('emitData');
 | 
			
		||||
			});
 | 
			
		||||
		},
 | 
			
		||||
 
 | 
			
		||||
@@ -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':
 | 
			
		||||
 
 | 
			
		||||
@@ -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>
 | 
			
		||||
 
 | 
			
		||||
@@ -1,8 +1,8 @@
 | 
			
		||||
<!--
 | 
			
		||||
 * @Author: zwq
 | 
			
		||||
 * @Date: 2023-08-01 14:55:51
 | 
			
		||||
 * @LastEditors: zwq
 | 
			
		||||
 * @LastEditTime: 2023-08-03 15:22:53
 | 
			
		||||
 * @LastEditors: DY
 | 
			
		||||
 * @LastEditTime: 2023-10-13 10:27:00
 | 
			
		||||
 * @Description:
 | 
			
		||||
-->
 | 
			
		||||
<template>
 | 
			
		||||
@@ -50,30 +50,25 @@ import {
 | 
			
		||||
const tableProps = [
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'code',
 | 
			
		||||
		label: '产品编码',
 | 
			
		||||
		align: 'center',
 | 
			
		||||
		label: '产品编码'
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'name',
 | 
			
		||||
		label: '产品名称',
 | 
			
		||||
		align: 'center',
 | 
			
		||||
		label: '产品名称'
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'specifications',
 | 
			
		||||
		label: '规格',
 | 
			
		||||
		align: 'center',
 | 
			
		||||
		label: '规格'
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'unitDictValue',
 | 
			
		||||
		label: '单位',
 | 
			
		||||
		align: 'center',
 | 
			
		||||
		subcomponent: unitDict,
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'createTime',
 | 
			
		||||
		label: '创建时间',
 | 
			
		||||
		align: 'center',
 | 
			
		||||
		filter: parseTime,
 | 
			
		||||
		filter: parseTime
 | 
			
		||||
	},
 | 
			
		||||
];
 | 
			
		||||
 | 
			
		||||
@@ -127,14 +122,14 @@ export default {
 | 
			
		||||
					name: 'search',
 | 
			
		||||
					color: 'primary',
 | 
			
		||||
				},
 | 
			
		||||
				{
 | 
			
		||||
					type: 'separate',
 | 
			
		||||
				},
 | 
			
		||||
				{
 | 
			
		||||
					type: 'button',
 | 
			
		||||
					btnName: '重置',
 | 
			
		||||
					name: 'reset',
 | 
			
		||||
				},
 | 
			
		||||
				// {
 | 
			
		||||
				// 	type: 'separate',
 | 
			
		||||
				// },
 | 
			
		||||
				// {
 | 
			
		||||
				// 	type: 'button',
 | 
			
		||||
				// 	btnName: '重置',
 | 
			
		||||
				// 	name: 'reset',
 | 
			
		||||
				// },
 | 
			
		||||
				{
 | 
			
		||||
					type: 'separate',
 | 
			
		||||
				},
 | 
			
		||||
 
 | 
			
		||||
@@ -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-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="请选择工厂">
 | 
			
		||||
						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>
 | 
			
		||||
							: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-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-form-item label="备注" prop="remark">
 | 
			
		||||
			<el-input v-model="dataForm.remark" clearable placeholder="请输入备注" />
 | 
			
		||||
		</el-form-item>
 | 
			
		||||
			</el-col>
 | 
			
		||||
		</el-row>
 | 
			
		||||
	</el-form>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
@@ -65,9 +96,7 @@ 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],
 | 
			
		||||
@@ -102,10 +131,23 @@ export default {
 | 
			
		||||
				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>
 | 
			
		||||
 
 | 
			
		||||
@@ -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>
 | 
			
		||||
@@ -52,45 +52,37 @@ import {
 | 
			
		||||
const tableProps = [
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'code',
 | 
			
		||||
		label: '产线编码',
 | 
			
		||||
		align: 'center',
 | 
			
		||||
		label: '产线编码'
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'name',
 | 
			
		||||
		label: '产线名称',
 | 
			
		||||
		align: 'center',
 | 
			
		||||
		label: '产线名称'
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'factoryName',
 | 
			
		||||
		label: '工厂',
 | 
			
		||||
		align: 'center',
 | 
			
		||||
		label: '工厂'
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'externalCode',
 | 
			
		||||
		label: '额外编码',
 | 
			
		||||
		align: 'center',
 | 
			
		||||
		label: '额外编码'
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'status',
 | 
			
		||||
		label: '当前状态',
 | 
			
		||||
		align: 'center',
 | 
			
		||||
		filter: codeFilter('lineStatus'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'description',
 | 
			
		||||
		label: '描述',
 | 
			
		||||
		align: 'center',
 | 
			
		||||
		label: '描述'
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'remark',
 | 
			
		||||
		label: '备注',
 | 
			
		||||
		align: 'center',
 | 
			
		||||
		label: '备注'
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'createTime',
 | 
			
		||||
		label: '创建时间',
 | 
			
		||||
		align: 'center',
 | 
			
		||||
		filter: parseTime,
 | 
			
		||||
		filter: parseTime
 | 
			
		||||
	},
 | 
			
		||||
];
 | 
			
		||||
 | 
			
		||||
@@ -132,14 +124,14 @@ export default {
 | 
			
		||||
					name: 'search',
 | 
			
		||||
					color: 'primary',
 | 
			
		||||
				},
 | 
			
		||||
				{
 | 
			
		||||
					type: 'separate',
 | 
			
		||||
				},
 | 
			
		||||
				{
 | 
			
		||||
					type: 'button',
 | 
			
		||||
					btnName: '重置',
 | 
			
		||||
					name: 'reset',
 | 
			
		||||
				},
 | 
			
		||||
				// {
 | 
			
		||||
				// 	type: 'separate',
 | 
			
		||||
				// },
 | 
			
		||||
				// {
 | 
			
		||||
				// 	type: 'button',
 | 
			
		||||
				// 	btnName: '重置',
 | 
			
		||||
				// 	name: 'reset',
 | 
			
		||||
				// },
 | 
			
		||||
				{
 | 
			
		||||
					type: 'separate',
 | 
			
		||||
				},
 | 
			
		||||
@@ -173,7 +165,7 @@ export default {
 | 
			
		||||
		getDataList() {
 | 
			
		||||
			this.dataListLoading = true;
 | 
			
		||||
			this.urlOptions.getDataListURL(this.listQuery).then((response) => {
 | 
			
		||||
				this.total = response.data.total;
 | 
			
		||||
				this.listQuery.total = response.data.total;
 | 
			
		||||
				this.getStatus(response.data.list);
 | 
			
		||||
				this.dataListLoading = false;
 | 
			
		||||
			});
 | 
			
		||||
@@ -195,7 +187,7 @@ export default {
 | 
			
		||||
			switch (val.btnName) {
 | 
			
		||||
				case 'search':
 | 
			
		||||
					this.listQuery.pageNo = 1;
 | 
			
		||||
					this.listQuery.pageSize = 10;.7
 | 
			
		||||
					this.listQuery.pageSize = 10;
 | 
			
		||||
					this.listQuery.name = val.name;
 | 
			
		||||
					this.getDataList();
 | 
			
		||||
					break;
 | 
			
		||||
 
 | 
			
		||||
@@ -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,18 +12,26 @@
 | 
			
		||||
		ref="dataForm"
 | 
			
		||||
		@keyup.enter.native="dataFormSubmit()"
 | 
			
		||||
		label-width="90px">
 | 
			
		||||
		<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="请选择产线">
 | 
			
		||||
@@ -36,9 +44,13 @@
 | 
			
		||||
						</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>
 | 
			
		||||
 
 | 
			
		||||
@@ -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',
 | 
			
		||||
				},
 | 
			
		||||
 
 | 
			
		||||
@@ -1,7 +1,7 @@
 | 
			
		||||
<!--
 | 
			
		||||
 * @Author: Do not edit
 | 
			
		||||
 * @Date: 2023-08-29 14:59:29
 | 
			
		||||
 * @LastEditTime: 2023-10-09 09:08:08
 | 
			
		||||
 * @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"
 | 
			
		||||
@@ -117,6 +119,7 @@ export default {
 | 
			
		||||
        pageNo: 1,
 | 
			
		||||
        total: 1,
 | 
			
		||||
      },
 | 
			
		||||
			fileName: '',
 | 
			
		||||
      exportLoading: false,
 | 
			
		||||
      dataListLoading: false,
 | 
			
		||||
			dialogVisible: false,
 | 
			
		||||
@@ -194,7 +197,8 @@ export default {
 | 
			
		||||
					type: 'button',
 | 
			
		||||
					btnName: '导出',
 | 
			
		||||
					name: 'export',
 | 
			
		||||
					color: 'warning',
 | 
			
		||||
					color: 'primary',
 | 
			
		||||
					plain: true
 | 
			
		||||
				}
 | 
			
		||||
			],
 | 
			
		||||
		};
 | 
			
		||||
@@ -207,6 +211,7 @@ export default {
 | 
			
		||||
		test() {
 | 
			
		||||
			var target = document.getElementsByClassName("right-aside")[0]
 | 
			
		||||
			target.style.background = '#FFFFFF'
 | 
			
		||||
			var that = this
 | 
			
		||||
			setTimeout(() => {
 | 
			
		||||
				html2canvas(target).then(function(canvas) {
 | 
			
		||||
						var contentWidth = canvas.width
 | 
			
		||||
@@ -242,7 +247,7 @@ export default {
 | 
			
		||||
							}
 | 
			
		||||
						}
 | 
			
		||||
 | 
			
		||||
						pdf.save('产线统计自动报表.pdf')
 | 
			
		||||
						pdf.save(that.fileName + '产线产量.pdf')
 | 
			
		||||
				})
 | 
			
		||||
			}, 300)
 | 
			
		||||
		},
 | 
			
		||||
@@ -285,7 +290,7 @@ export default {
 | 
			
		||||
      try {
 | 
			
		||||
        FileSaver.saveAs(new Blob([exportTableOut], {
 | 
			
		||||
          type: 'application/octet-stream'
 | 
			
		||||
        }), '产线统计自动报表.xlsx')
 | 
			
		||||
        }), this.fileName + '产线产量.xlsx')
 | 
			
		||||
      } catch (e) {
 | 
			
		||||
        if (typeof console !== 'undefined') console.log(e, exportTableOut)
 | 
			
		||||
      }
 | 
			
		||||
@@ -310,6 +315,9 @@ export default {
 | 
			
		||||
					this.listQuery.reportType = val.reportType ? val.reportType : 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;
 | 
			
		||||
					if (val.timeVal && val.timeVal.length > 0) {
 | 
			
		||||
						this.fileName = val.timeVal[0].slice(0, 10) + '-' + val.timeVal[1].slice(0, 10) + '_'
 | 
			
		||||
          }
 | 
			
		||||
					this.getDataList();
 | 
			
		||||
					break;
 | 
			
		||||
				case 'export':
 | 
			
		||||
@@ -327,7 +335,7 @@ export default {
 | 
			
		||||
					item.reportType = item.reportType === 1 ? '日' : item.reportType === 2 ? '周' : '月'
 | 
			
		||||
					return item
 | 
			
		||||
				});
 | 
			
		||||
        this.total = response.data.total;
 | 
			
		||||
        this.listQuery.total = response.data.total;
 | 
			
		||||
        this.dataListLoading = false;
 | 
			
		||||
				this.showData = this.tableData
 | 
			
		||||
      });
 | 
			
		||||
 
 | 
			
		||||
@@ -1,7 +1,7 @@
 | 
			
		||||
<!--
 | 
			
		||||
 * @Author: Do not edit
 | 
			
		||||
 * @Date: 2023-08-29 14:59:29
 | 
			
		||||
 * @LastEditTime: 2023-10-09 15:14:42
 | 
			
		||||
 * @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"
 | 
			
		||||
@@ -110,7 +112,7 @@ export default {
 | 
			
		||||
			showData: [],
 | 
			
		||||
			tableData: [],
 | 
			
		||||
			selectedList: [],
 | 
			
		||||
			fileName: [],
 | 
			
		||||
			fileName: '',
 | 
			
		||||
			formConfig: [
 | 
			
		||||
				{
 | 
			
		||||
					type: 'select',
 | 
			
		||||
@@ -145,7 +147,8 @@ export default {
 | 
			
		||||
					type: 'button',
 | 
			
		||||
					btnName: '导出',
 | 
			
		||||
					name: 'export',
 | 
			
		||||
					color: 'warning',
 | 
			
		||||
					color: 'primary',
 | 
			
		||||
					plain: true
 | 
			
		||||
				}
 | 
			
		||||
			],
 | 
			
		||||
		};
 | 
			
		||||
@@ -156,7 +159,7 @@ export default {
 | 
			
		||||
		}
 | 
			
		||||
		// const time = new Date()
 | 
			
		||||
		// this.formConfig[1].defaultSelect = [time, time]
 | 
			
		||||
		// this.getDataList()
 | 
			
		||||
		this.getDataList()
 | 
			
		||||
		this.getPdLineList()
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
@@ -199,7 +202,7 @@ export default {
 | 
			
		||||
							}
 | 
			
		||||
						}
 | 
			
		||||
 | 
			
		||||
						pdf.save(that.fileName[0] + '-' + that.fileName[1] + '_产线产量.pdf')
 | 
			
		||||
						pdf.save(that.fileName + '产线产量.pdf')
 | 
			
		||||
				})
 | 
			
		||||
			}, 300)
 | 
			
		||||
		},
 | 
			
		||||
@@ -222,7 +225,7 @@ export default {
 | 
			
		||||
      try {
 | 
			
		||||
        FileSaver.saveAs(new Blob([exportTableOut], {
 | 
			
		||||
          type: 'application/octet-stream'
 | 
			
		||||
        }), this.fileName[0] + '-' + this.fileName[1] + '_产线产量.xlsx')
 | 
			
		||||
        }), this.fileName + '产线产量.xlsx')
 | 
			
		||||
      } catch (e) {
 | 
			
		||||
        if (typeof console !== 'undefined') console.log(e, exportTableOut)
 | 
			
		||||
      }
 | 
			
		||||
@@ -265,17 +268,10 @@ export default {
 | 
			
		||||
					this.listQuery.proLineId = val.line ? val.line : 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;
 | 
			
		||||
					console.log('nihc 你好', val.timeVal)
 | 
			
		||||
					if (val.timeVal && val.timeVal.length > 0) {
 | 
			
		||||
						this.fileName[0] = val.timeVal[0].slice(0, 10)
 | 
			
		||||
						this.fileName[1] = val.timeVal[1].slice(0, 10)
 | 
			
		||||
            this.getDataList();
 | 
			
		||||
          } else {
 | 
			
		||||
            this.$message({
 | 
			
		||||
              message: '请选择时间',
 | 
			
		||||
              type: 'warning'
 | 
			
		||||
            });
 | 
			
		||||
						this.fileName = val.timeVal[0].slice(0, 10) + '-' + val.timeVal[1].slice(0, 10) + '_'
 | 
			
		||||
          }
 | 
			
		||||
					this.getDataList();
 | 
			
		||||
					break;
 | 
			
		||||
				case 'export':
 | 
			
		||||
					this.handleExport();
 | 
			
		||||
@@ -289,7 +285,7 @@ export default {
 | 
			
		||||
      this.dataListLoading = true;
 | 
			
		||||
      this.urlOptions.getDataListURL(this.listQuery).then(response => {
 | 
			
		||||
        this.tableData = response.data;
 | 
			
		||||
        this.total = response.data.total;
 | 
			
		||||
        this.listQuery.total = response.data.length;
 | 
			
		||||
        this.dataListLoading = false;
 | 
			
		||||
				this.showData = this.tableData
 | 
			
		||||
      });
 | 
			
		||||
 
 | 
			
		||||
@@ -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);
 | 
			
		||||
 
 | 
			
		||||
@@ -1,7 +1,7 @@
 | 
			
		||||
<!--
 | 
			
		||||
 * @Author: Do not edit
 | 
			
		||||
 * @Date: 2023-08-29 14:59:29
 | 
			
		||||
 * @LastEditTime: 2023-10-08 10:51:49
 | 
			
		||||
 * @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"
 | 
			
		||||
@@ -129,6 +131,7 @@ export default {
 | 
			
		||||
			tableBtn: [],
 | 
			
		||||
			tableData: [],
 | 
			
		||||
			showData: [],
 | 
			
		||||
			fileName: '',
 | 
			
		||||
			formConfig: [
 | 
			
		||||
				{
 | 
			
		||||
					type: 'select',
 | 
			
		||||
@@ -187,7 +190,8 @@ export default {
 | 
			
		||||
					type: 'button',
 | 
			
		||||
					btnName: '导出',
 | 
			
		||||
					name: 'export',
 | 
			
		||||
					color: 'warning',
 | 
			
		||||
					color: 'primary',
 | 
			
		||||
					plain: true
 | 
			
		||||
				}
 | 
			
		||||
			],
 | 
			
		||||
		};
 | 
			
		||||
@@ -200,6 +204,7 @@ export default {
 | 
			
		||||
		test() {
 | 
			
		||||
			var target = document.getElementsByClassName("right-aside")[0]
 | 
			
		||||
			target.style.background = '#FFFFFF'
 | 
			
		||||
			var that = this
 | 
			
		||||
			setTimeout(() => {
 | 
			
		||||
				html2canvas(target).then(function(canvas) {
 | 
			
		||||
						var contentWidth = canvas.width
 | 
			
		||||
@@ -235,7 +240,7 @@ export default {
 | 
			
		||||
							}
 | 
			
		||||
						}
 | 
			
		||||
 | 
			
		||||
						pdf.save('工段统计自动报表.pdf')
 | 
			
		||||
						pdf.save(that.fileName + '工段统计.pdf')
 | 
			
		||||
				})
 | 
			
		||||
			}, 300)
 | 
			
		||||
		},
 | 
			
		||||
@@ -258,7 +263,7 @@ export default {
 | 
			
		||||
      try {
 | 
			
		||||
        FileSaver.saveAs(new Blob([exportTableOut], {
 | 
			
		||||
          type: 'application/octet-stream'
 | 
			
		||||
        }), '工段统计自动报表.xlsx')
 | 
			
		||||
        }), this.fileName + '工段统计.xlsx')
 | 
			
		||||
      } catch (e) {
 | 
			
		||||
        if (typeof console !== 'undefined') console.log(e, exportTableOut)
 | 
			
		||||
      }
 | 
			
		||||
@@ -307,6 +312,9 @@ export default {
 | 
			
		||||
					this.listQuery.reportType = val.reportType ? val.reportType : 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;
 | 
			
		||||
					if (val.timeVal && val.timeVal.length > 0) {
 | 
			
		||||
						this.fileName = val.timeVal[0].slice(0, 10) + '-' + val.timeVal[1].slice(0, 10) + '_'
 | 
			
		||||
          }
 | 
			
		||||
					this.getDataList();
 | 
			
		||||
					break;
 | 
			
		||||
				case 'export':
 | 
			
		||||
@@ -325,7 +333,7 @@ export default {
 | 
			
		||||
					return item
 | 
			
		||||
				});
 | 
			
		||||
				this.showData = this.tableData
 | 
			
		||||
        this.total = response.data.total;
 | 
			
		||||
        this.listQuery.total = response.data.total;
 | 
			
		||||
        this.dataListLoading = false;
 | 
			
		||||
      });
 | 
			
		||||
    },
 | 
			
		||||
 
 | 
			
		||||
@@ -3,15 +3,20 @@
 | 
			
		||||
		<search-bar
 | 
			
		||||
			:formConfigs="formConfig"
 | 
			
		||||
			ref="searchBarForm"
 | 
			
		||||
			@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"
 | 
			
		||||
@@ -45,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: '损耗比例/%'
 | 
			
		||||
  }
 | 
			
		||||
];
 | 
			
		||||
 | 
			
		||||
@@ -110,6 +108,7 @@ export default {
 | 
			
		||||
          param: 'proLineId',
 | 
			
		||||
					defaultSelect: '',
 | 
			
		||||
					filterable: true,
 | 
			
		||||
					onchange: true,
 | 
			
		||||
				},
 | 
			
		||||
				{
 | 
			
		||||
					type: 'select',
 | 
			
		||||
@@ -132,15 +131,20 @@ export default {
 | 
			
		||||
				},
 | 
			
		||||
				{
 | 
			
		||||
					type: 'button',
 | 
			
		||||
					btnName: '搜索',
 | 
			
		||||
					btnName: '查询',
 | 
			
		||||
					name: 'search',
 | 
			
		||||
					color: 'primary',
 | 
			
		||||
				},
 | 
			
		||||
				{
 | 
			
		||||
					type: 'separate',
 | 
			
		||||
				},
 | 
			
		||||
				{
 | 
			
		||||
					type: 'button',
 | 
			
		||||
					btnName: '导出',
 | 
			
		||||
					name: 'export',
 | 
			
		||||
				},
 | 
			
		||||
					color: 'primary',
 | 
			
		||||
					plain: true
 | 
			
		||||
				}
 | 
			
		||||
			],
 | 
			
		||||
		};
 | 
			
		||||
	},
 | 
			
		||||
@@ -151,9 +155,39 @@ export default {
 | 
			
		||||
    // this.getDataList()
 | 
			
		||||
	},
 | 
			
		||||
	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() {
 | 
			
		||||
			var target = document.getElementsByClassName("right-aside")[0]
 | 
			
		||||
			target.style.background = '#FFFFFF'
 | 
			
		||||
			var that = this
 | 
			
		||||
			setTimeout(() => {
 | 
			
		||||
				html2canvas(target).then(function(canvas) {
 | 
			
		||||
						var contentWidth = canvas.width
 | 
			
		||||
@@ -189,7 +223,7 @@ export default {
 | 
			
		||||
							}
 | 
			
		||||
						}
 | 
			
		||||
 | 
			
		||||
						pdf.save('工段统计数据查询报表.pdf')
 | 
			
		||||
						pdf.save(that.fileName[0] + '-' + that.fileName[1] + '_工段统计.pdf')
 | 
			
		||||
				})
 | 
			
		||||
			}, 300)
 | 
			
		||||
		},
 | 
			
		||||
@@ -212,7 +246,7 @@ export default {
 | 
			
		||||
      try {
 | 
			
		||||
        FileSaver.saveAs(new Blob([exportTableOut], {
 | 
			
		||||
          type: 'application/octet-stream'
 | 
			
		||||
        }), '工段统计数据查询报表.xlsx')
 | 
			
		||||
        }), this.fileName[0] + '-' + this.fileName[1] + '_工段统计.xlsx')
 | 
			
		||||
      } catch (e) {
 | 
			
		||||
        if (typeof console !== 'undefined') console.log(e, exportTableOut)
 | 
			
		||||
      }
 | 
			
		||||
@@ -293,10 +327,9 @@ export default {
 | 
			
		||||
          this.listQuery.sectionId = val.sectionId ? val.sectionId : 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.fileName[0] = val.timeSlot[0]
 | 
			
		||||
					this.fileName[1] = val.timeSlot[1]
 | 
			
		||||
					console.log('wfjmmki文件名称', this.fileName)
 | 
			
		||||
					if (val.timeSlot) {
 | 
			
		||||
					if (val.timeSlot && val.timeSlot.length > 0) {
 | 
			
		||||
						this.fileName[0] = val.timeSlot[0].slice(0, 10)
 | 
			
		||||
						this.fileName[1] = val.timeSlot[1].slice(0, 10)
 | 
			
		||||
            this.getDataList()
 | 
			
		||||
          } else {
 | 
			
		||||
            this.$message({
 | 
			
		||||
@@ -315,7 +348,14 @@ export default {
 | 
			
		||||
					this.getDataList();
 | 
			
		||||
					break;
 | 
			
		||||
				case 'export':
 | 
			
		||||
					if (val.timeSlot && val.timeSlot.length > 0) {
 | 
			
		||||
						this.handleExport();
 | 
			
		||||
          } else {
 | 
			
		||||
            this.$message({
 | 
			
		||||
              message: '请选择时间',
 | 
			
		||||
              type: 'warning'
 | 
			
		||||
            });
 | 
			
		||||
          }
 | 
			
		||||
					break;
 | 
			
		||||
				default:
 | 
			
		||||
					console.log(val);
 | 
			
		||||
 
 | 
			
		||||
@@ -125,7 +125,31 @@ export default {
 | 
			
		||||
      this.$emit('submit', this.queryParams)
 | 
			
		||||
    },
 | 
			
		||||
    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) {// 本月最后一天
 | 
			
		||||
      let year = moment(timeStamp).format('YYYY')
 | 
			
		||||
 
 | 
			
		||||
@@ -100,9 +100,10 @@ export default {
 | 
			
		||||
      }
 | 
			
		||||
      this.chartData = this.list
 | 
			
		||||
    },
 | 
			
		||||
    exportData() {
 | 
			
		||||
    exportData(val) {
 | 
			
		||||
      if (this.list.length > 0) {
 | 
			
		||||
        var wb = XLSX.utils.table_to_book(document.querySelector(".yoy-out-table"))
 | 
			
		||||
        let fileName = val.name + "同比分析.xlsx"
 | 
			
		||||
        var wbout = XLSX.write(wb, {
 | 
			
		||||
            bookType: "xlsx",
 | 
			
		||||
            bookSST: true,
 | 
			
		||||
@@ -111,7 +112,7 @@ export default {
 | 
			
		||||
        try {
 | 
			
		||||
            FileSaver.saveAs(
 | 
			
		||||
            new Blob([wbout], { type: "application/octet-stream" }),
 | 
			
		||||
            "同比分析.xlsx"
 | 
			
		||||
            fileName
 | 
			
		||||
            )
 | 
			
		||||
        } catch (e) {
 | 
			
		||||
            if (typeof console !== "undefined") console.log(e, wbout);
 | 
			
		||||
 
 | 
			
		||||
@@ -43,7 +43,7 @@ export default {
 | 
			
		||||
					eq.okQuantity,
 | 
			
		||||
					eq.nokQuantity,
 | 
			
		||||
					eq.totalQuantity,
 | 
			
		||||
					eq.passRate.toFixed(4),
 | 
			
		||||
					eq.passRate?.toFixed(4),
 | 
			
		||||
				]);
 | 
			
		||||
			});
 | 
			
		||||
			return {
 | 
			
		||||
 
 | 
			
		||||
@@ -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>
 | 
			
		||||
 
 | 
			
		||||
@@ -14,7 +14,7 @@ import * as echarts from 'echarts';
 | 
			
		||||
 * 
 | 
			
		||||
 * https://echarts.apache.org/zh/option.html#series-custom.renderItem.arguments.params
 | 
			
		||||
 */
 | 
			
		||||
function renderItem(params, api) { }
 | 
			
		||||
// function renderItem(params, api) { }
 | 
			
		||||
 | 
			
		||||
export default class Gantt {
 | 
			
		||||
    constructor(el) {
 | 
			
		||||
 
 | 
			
		||||
@@ -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',
 | 
			
		||||
 
 | 
			
		||||
@@ -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