test #47
							
								
								
									
										4
									
								
								.env.dev
									
									
									
									
									
								
							
							
						
						
									
										4
									
								
								.env.dev
									
									
									
									
									
								
							@@ -12,9 +12,9 @@ ENV = 'development'
 | 
			
		||||
VUE_APP_TITLE = 产线监控系统
 | 
			
		||||
 | 
			
		||||
# 芋道管理系统/开发环境
 | 
			
		||||
# VUE_APP_BASE_API = 'http://192.168.1.49:48080'
 | 
			
		||||
VUE_APP_BASE_API = 'http://192.168.1.49:48080'
 | 
			
		||||
# VUE_APP_BASE_API = 'http://192.168.1.8:48080'
 | 
			
		||||
VUE_APP_BASE_API = 'http://192.168.0.33:48080'
 | 
			
		||||
# VUE_APP_BASE_API = 'http://192.168.0.33:48080'
 | 
			
		||||
# VUE_APP_BASE_API = 'http://192.168.1.188:48080'
 | 
			
		||||
 | 
			
		||||
# 路由懒加载
 | 
			
		||||
 
 | 
			
		||||
@@ -35,11 +35,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
 | 
			
		||||
  })
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
 
 | 
			
		||||
							
								
								
									
										
											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  | 
@@ -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">
 | 
			
		||||
@@ -119,7 +121,15 @@ export default {
 | 
			
		||||
		disabled: {
 | 
			
		||||
			type: Boolean,
 | 
			
		||||
			default: false,
 | 
			
		||||
		}
 | 
			
		||||
		},
 | 
			
		||||
		labelPosition: {
 | 
			
		||||
			type: String,
 | 
			
		||||
			default: 'right',
 | 
			
		||||
		},
 | 
			
		||||
		size: {
 | 
			
		||||
			type: String,
 | 
			
		||||
			default: '',
 | 
			
		||||
		},
 | 
			
		||||
	},
 | 
			
		||||
	data() {
 | 
			
		||||
		return {
 | 
			
		||||
 
 | 
			
		||||
@@ -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: '',
 | 
			
		||||
 
 | 
			
		||||
							
								
								
									
										294
									
								
								src/views/core/base/equipment/components/AssetsUpload.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										294
									
								
								src/views/core/base/equipment/components/AssetsUpload.vue
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,294 @@
 | 
			
		||||
<!-- 
 | 
			
		||||
    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" drag action="uploadUrl" multiple>
 | 
			
		||||
				<i class="el-icon-upload"></i>
 | 
			
		||||
				<div class="el-upload__text">
 | 
			
		||||
					<span>将文件拖到此处或</span>
 | 
			
		||||
					<em>点击上传</em>
 | 
			
		||||
				</div>
 | 
			
		||||
				<div class="el-upload__tip" slot="tip">
 | 
			
		||||
					<!-- 只能上传jpg/png文件,且不超过500kb -->
 | 
			
		||||
					some tips....
 | 
			
		||||
				</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">
 | 
			
		||||
				<i class="el-icon-delete"></i>
 | 
			
		||||
			</div>
 | 
			
		||||
		</section>
 | 
			
		||||
	</div>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
import defaultBg from '../../../../../assets/images/default-file-icon.png';
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
	name: 'AssetsUpload',
 | 
			
		||||
	components: {},
 | 
			
		||||
	props: {
 | 
			
		||||
		type: {
 | 
			
		||||
			type: String,
 | 
			
		||||
			default: 'image',
 | 
			
		||||
		},
 | 
			
		||||
		dataSource: {
 | 
			
		||||
			type: Array,
 | 
			
		||||
			default: () => [],
 | 
			
		||||
		},
 | 
			
		||||
		equipmentId: {
 | 
			
		||||
			type: String,
 | 
			
		||||
			default: '',
 | 
			
		||||
		},
 | 
			
		||||
		isPicMode: {
 | 
			
		||||
			type: Boolean,
 | 
			
		||||
			default: false,
 | 
			
		||||
		},
 | 
			
		||||
	},
 | 
			
		||||
	emits: ['update-filelist'],
 | 
			
		||||
	data() {
 | 
			
		||||
		return {
 | 
			
		||||
			defaultBg,
 | 
			
		||||
			expand: false,
 | 
			
		||||
			fileList: [],
 | 
			
		||||
			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',
 | 
			
		||||
				},
 | 
			
		||||
			],
 | 
			
		||||
		};
 | 
			
		||||
	},
 | 
			
		||||
	computed: {},
 | 
			
		||||
	mounted() {
 | 
			
		||||
		console.log('this.ispicmocde', this.isPicMode);
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
		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 {
 | 
			
		||||
		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: -16px;
 | 
			
		||||
	font-size: 14px;
 | 
			
		||||
	line-height: 1;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.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>
 | 
			
		||||
@@ -35,6 +35,7 @@
 | 
			
		||||
							key="drawer-dialog-form"
 | 
			
		||||
							v-if="showForm"
 | 
			
		||||
							ref="form"
 | 
			
		||||
							label-position="top"
 | 
			
		||||
							:dataForm="form"
 | 
			
		||||
							:rows="formRows" />
 | 
			
		||||
					</div>
 | 
			
		||||
@@ -43,9 +44,11 @@
 | 
			
		||||
						<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 +57,31 @@
 | 
			
		||||
								:method-list="tableBtn"
 | 
			
		||||
								@clickBtn="handleTableBtnClick" />
 | 
			
		||||
						</base-table>
 | 
			
		||||
 | 
			
		||||
						<!-- 分页组件 -->
 | 
			
		||||
						<pagination
 | 
			
		||||
							v-show="total > 0"
 | 
			
		||||
							:total="total"
 | 
			
		||||
							:page.sync="attrQuery.params.pageNo"
 | 
			
		||||
							:limit.sync="attrQuery.params.pageSize"
 | 
			
		||||
							@pagination="getAttrList" />
 | 
			
		||||
					</div>
 | 
			
		||||
				</section>
 | 
			
		||||
			</div>
 | 
			
		||||
 | 
			
		||||
			<div class="drawer-body__footer">
 | 
			
		||||
				<el-button style="margin-right: 10px" @click="handleCancel">
 | 
			
		||||
					返回
 | 
			
		||||
				</el-button>
 | 
			
		||||
				<el-button style="" @click="handleCancel">取消</el-button>
 | 
			
		||||
				<el-button v-if="mode == 'detail'" type="primary" @click="toggleEdit">
 | 
			
		||||
					编辑
 | 
			
		||||
				</el-button>
 | 
			
		||||
				<span v-else>
 | 
			
		||||
					<el-button type="primary" @click="handleSave">保存</el-button>
 | 
			
		||||
					<!-- sections的第二项必须是 属性列表  -->
 | 
			
		||||
					<el-button
 | 
			
		||||
				<el-button v-else type="primary" @click="handleCancel">确定</el-button>
 | 
			
		||||
				<!-- sections的第二项必须是 属性列表  -->
 | 
			
		||||
				<!-- <el-button
 | 
			
		||||
						v-if="sections[1].allowAdd"
 | 
			
		||||
						type="primary"
 | 
			
		||||
						@click="handleAddAttr">
 | 
			
		||||
						添加属性
 | 
			
		||||
					</el-button>
 | 
			
		||||
				</span>
 | 
			
		||||
					</el-button> -->
 | 
			
		||||
			</div>
 | 
			
		||||
		</div>
 | 
			
		||||
 | 
			
		||||
@@ -99,7 +106,7 @@
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
import DialogForm from '@/components/DialogForm';
 | 
			
		||||
import DialogForm from './DialogForm';
 | 
			
		||||
 | 
			
		||||
const SmallTitle = {
 | 
			
		||||
	name: 'SmallTitle',
 | 
			
		||||
@@ -161,7 +168,12 @@ export default {
 | 
			
		||||
					},
 | 
			
		||||
				],
 | 
			
		||||
			],
 | 
			
		||||
			attrQuery: null, // 属性列表的请求
 | 
			
		||||
			attrQuery: {
 | 
			
		||||
				params: {
 | 
			
		||||
					pageNo: 1,
 | 
			
		||||
					pageSize: 10,
 | 
			
		||||
				},
 | 
			
		||||
			}, // 属性列表的请求
 | 
			
		||||
			infoQuery: null, // 基本信息的请求
 | 
			
		||||
			attrFormSubmitting: false,
 | 
			
		||||
			attrListLoading: false,
 | 
			
		||||
@@ -175,15 +187,19 @@ export default {
 | 
			
		||||
						// 重置图片的位置
 | 
			
		||||
						return {
 | 
			
		||||
							...col,
 | 
			
		||||
							bind: {
 | 
			
		||||
								...col.bind
 | 
			
		||||
							},
 | 
			
		||||
							style: {
 | 
			
		||||
								left: 0,
 | 
			
		||||
								right: 'unset'
 | 
			
		||||
							}
 | 
			
		||||
						}
 | 
			
		||||
								right: 'unset',
 | 
			
		||||
							},
 | 
			
		||||
						};
 | 
			
		||||
					}
 | 
			
		||||
					return {
 | 
			
		||||
						...col,
 | 
			
		||||
						bind: {
 | 
			
		||||
							...col.bind,
 | 
			
		||||
							// 详情 模式下,禁用各种输入
 | 
			
		||||
							disabled: this.mode == 'detail',
 | 
			
		||||
						},
 | 
			
		||||
@@ -210,7 +226,6 @@ export default {
 | 
			
		||||
						this.form = data;
 | 
			
		||||
						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;
 | 
			
		||||
@@ -331,33 +346,44 @@ export default {
 | 
			
		||||
		},
 | 
			
		||||
 | 
			
		||||
		// 提交属性表
 | 
			
		||||
		async submitAttrForm() {
 | 
			
		||||
			this.$refs['attrForm'].validate((valid) => {
 | 
			
		||||
		submitAttrForm() {
 | 
			
		||||
			this.$refs['attrForm'].validate(async (valid) => {
 | 
			
		||||
				if (!valid) {
 | 
			
		||||
					return;
 | 
			
		||||
				}
 | 
			
		||||
			});
 | 
			
		||||
			console.log('this.attrform', this.attrForm);
 | 
			
		||||
			const isEdit = this.attrForm.id != null;
 | 
			
		||||
			this.attrFormSubmitting = true;
 | 
			
		||||
			const res = await this.$axios({
 | 
			
		||||
				url: isEdit ? this.sections[1].urlUpdate : this.sections[1].urlCreate,
 | 
			
		||||
				method: isEdit ? 'put' : 'post',
 | 
			
		||||
				data: this.attrForm,
 | 
			
		||||
			});
 | 
			
		||||
 | 
			
		||||
			if (res.code == 0) {
 | 
			
		||||
				this.closeAttrForm();
 | 
			
		||||
				this.$message({
 | 
			
		||||
					message: `${isEdit ? '更新' : '创建'}成功`,
 | 
			
		||||
					type: 'success',
 | 
			
		||||
					duration: 1500,
 | 
			
		||||
					onClose: () => {
 | 
			
		||||
						this.getAttrList();
 | 
			
		||||
					},
 | 
			
		||||
				});
 | 
			
		||||
			}
 | 
			
		||||
			this.attrFormSubmitting = false;
 | 
			
		||||
				try {
 | 
			
		||||
					const isEdit = this.attrForm.id != null;
 | 
			
		||||
					this.attrFormSubmitting = true;
 | 
			
		||||
					const res = await this.$axios({
 | 
			
		||||
						url: isEdit
 | 
			
		||||
							? this.sections[1].urlUpdate
 | 
			
		||||
							: this.sections[1].urlCreate,
 | 
			
		||||
						method: isEdit ? 'put' : 'post',
 | 
			
		||||
						data: this.attrForm,
 | 
			
		||||
					});
 | 
			
		||||
 | 
			
		||||
					if (res.code == 0) {
 | 
			
		||||
						this.closeAttrForm();
 | 
			
		||||
						this.$message({
 | 
			
		||||
							message: `${isEdit ? '更新' : '创建'}成功`,
 | 
			
		||||
							type: 'success',
 | 
			
		||||
							duration: 1500,
 | 
			
		||||
							onClose: () => {
 | 
			
		||||
								this.getAttrList();
 | 
			
		||||
							},
 | 
			
		||||
						});
 | 
			
		||||
					}
 | 
			
		||||
					this.attrFormSubmitting = false;
 | 
			
		||||
				} catch (err) {
 | 
			
		||||
					this.$message({
 | 
			
		||||
						message: err,
 | 
			
		||||
						type: 'error',
 | 
			
		||||
						duration: 1500,
 | 
			
		||||
					});
 | 
			
		||||
					this.attrFormSubmitting = false;
 | 
			
		||||
				}
 | 
			
		||||
			});
 | 
			
		||||
		},
 | 
			
		||||
 | 
			
		||||
		closeAttrForm() {
 | 
			
		||||
 
 | 
			
		||||
@@ -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>
 | 
			
		||||
 | 
			
		||||
		<!-- 设备 详情 - 编辑 -->
 | 
			
		||||
@@ -55,7 +58,7 @@
 | 
			
		||||
				{
 | 
			
		||||
					name: '基本信息',
 | 
			
		||||
					key: 'base',
 | 
			
		||||
					rows: rows,
 | 
			
		||||
					rows: computedRows,
 | 
			
		||||
					url: '/base/equipment/get',
 | 
			
		||||
					urlUpdate: '/base/equipment/update',
 | 
			
		||||
					urlCreate: '/base/equipment/create',
 | 
			
		||||
@@ -93,8 +96,8 @@
 | 
			
		||||
				},
 | 
			
		||||
			]"
 | 
			
		||||
			@refreshDataList="getList"
 | 
			
		||||
			@cancel="editVisible = false"
 | 
			
		||||
			@destroy="editVisible = false" />
 | 
			
		||||
			@cancel="cancelEdit"
 | 
			
		||||
			@destroy="cancelEdit" />
 | 
			
		||||
	</div>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
@@ -115,6 +118,7 @@ import {
 | 
			
		||||
	exportEquipmentExcel,
 | 
			
		||||
} from '@/api/base/equipment';
 | 
			
		||||
import Editor from '@/components/Editor';
 | 
			
		||||
import AssetsUpload from './components/AssetsUpload.vue';
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
	name: 'Equipment',
 | 
			
		||||
@@ -155,7 +159,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 +243,6 @@ export default {
 | 
			
		||||
						prop: 'code',
 | 
			
		||||
						url: '/base/equipment/getCode',
 | 
			
		||||
					},
 | 
			
		||||
				],
 | 
			
		||||
				[
 | 
			
		||||
					{
 | 
			
		||||
						input: true,
 | 
			
		||||
						label: '英文名称',
 | 
			
		||||
@@ -250,6 +252,8 @@ export default {
 | 
			
		||||
						// 	disabled: true, // some condition, like detail mode...
 | 
			
		||||
						// }
 | 
			
		||||
					},
 | 
			
		||||
				],
 | 
			
		||||
				[
 | 
			
		||||
					{
 | 
			
		||||
						input: true,
 | 
			
		||||
						label: '缩写',
 | 
			
		||||
@@ -259,13 +263,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 +292,6 @@ export default {
 | 
			
		||||
						label: '进厂日期',
 | 
			
		||||
						prop: 'enterTime',
 | 
			
		||||
					},
 | 
			
		||||
				],
 | 
			
		||||
				[
 | 
			
		||||
					{
 | 
			
		||||
						input: true,
 | 
			
		||||
						prop: 'tvalue',
 | 
			
		||||
@@ -302,11 +306,14 @@ export default {
 | 
			
		||||
							},
 | 
			
		||||
						],
 | 
			
		||||
					},
 | 
			
		||||
				],
 | 
			
		||||
				[
 | 
			
		||||
					{
 | 
			
		||||
						input: true,
 | 
			
		||||
						label: '产品加工时间',
 | 
			
		||||
						label: '产品加工时间(s)',
 | 
			
		||||
						prop: 'processingTime',
 | 
			
		||||
						rules: [
 | 
			
		||||
							{ required: true, message: '不能为空', trigger: 'blur' },
 | 
			
		||||
							{
 | 
			
		||||
								type: 'number',
 | 
			
		||||
								message: '请输入正确的数字值',
 | 
			
		||||
@@ -315,8 +322,7 @@ export default {
 | 
			
		||||
							},
 | 
			
		||||
						],
 | 
			
		||||
					},
 | 
			
		||||
				],
 | 
			
		||||
				[
 | 
			
		||||
 | 
			
		||||
					{
 | 
			
		||||
						input: true,
 | 
			
		||||
						label: '制造商',
 | 
			
		||||
@@ -337,40 +343,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 +444,45 @@ 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,
 | 
			
		||||
								bind: {
 | 
			
		||||
									'is-pic-mode': false,
 | 
			
		||||
								},
 | 
			
		||||
							},
 | 
			
		||||
						],
 | 
			
		||||
						[
 | 
			
		||||
							{
 | 
			
		||||
								assetUpload: true,
 | 
			
		||||
								key: 'eq-pics', // 用于区分不同的上传组件
 | 
			
		||||
								label: '上传图片',
 | 
			
		||||
								fieldName: 'images',
 | 
			
		||||
								subcomponent: AssetsUpload,
 | 
			
		||||
								bind: {
 | 
			
		||||
									'is-pic-mode': true,
 | 
			
		||||
								},
 | 
			
		||||
							},
 | 
			
		||||
						],
 | 
			
		||||
				  ]
 | 
			
		||||
				: this.rows;
 | 
			
		||||
		},
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
		/** 查询列表 */
 | 
			
		||||
		getList() {
 | 
			
		||||
@@ -420,6 +499,10 @@ export default {
 | 
			
		||||
			this.open = false;
 | 
			
		||||
			this.reset();
 | 
			
		||||
		},
 | 
			
		||||
		cancelEdit() {
 | 
			
		||||
			this.showUploadComponents = false;
 | 
			
		||||
			this.editVisible = false;
 | 
			
		||||
		},
 | 
			
		||||
		/** 表单重置 */
 | 
			
		||||
		reset() {
 | 
			
		||||
			this.form = {
 | 
			
		||||
@@ -445,11 +528,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 +601,7 @@ export default {
 | 
			
		||||
		viewDetail(id) {
 | 
			
		||||
			this.reset();
 | 
			
		||||
			this.editMode = 'detail';
 | 
			
		||||
			this.showUploadComponents = true;
 | 
			
		||||
			this.form.id = id;
 | 
			
		||||
			this.editVisible = true;
 | 
			
		||||
			this.$nextTick(() => {
 | 
			
		||||
@@ -524,11 +610,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(() => {
 | 
			
		||||
 
 | 
			
		||||
@@ -38,6 +38,21 @@
 | 
			
		||||
			@cancel="cancel"
 | 
			
		||||
			@confirm="submitForm">
 | 
			
		||||
			<DialogForm v-if="open" ref="form" :dataForm="form" :rows="rows" />
 | 
			
		||||
			<div style="padding: 12px; background: #ccc">
 | 
			
		||||
				<h3>文件列表</h3>
 | 
			
		||||
				<hr />
 | 
			
		||||
				<ul>
 | 
			
		||||
					<li v-for="item in form.fileUrls" :key="item">
 | 
			
		||||
						{{ JSON.stringify(item) }}
 | 
			
		||||
					</li>
 | 
			
		||||
				</ul>
 | 
			
		||||
				<hr />
 | 
			
		||||
				<ul>
 | 
			
		||||
					<li v-for="item in form.fileNames" :key="item">
 | 
			
		||||
						{{ JSON.stringify(item) }}
 | 
			
		||||
					</li>
 | 
			
		||||
				</ul>
 | 
			
		||||
			</div>
 | 
			
		||||
		</base-dialog>
 | 
			
		||||
	</div>
 | 
			
		||||
</template>
 | 
			
		||||
@@ -86,9 +101,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: [
 | 
			
		||||
				{
 | 
			
		||||
@@ -236,6 +251,7 @@ export default {
 | 
			
		||||
			const id = row.id;
 | 
			
		||||
			getEquipmentType(id).then((response) => {
 | 
			
		||||
				this.form = response.data;
 | 
			
		||||
				debugger;
 | 
			
		||||
				this.open = true;
 | 
			
		||||
				this.title = '修改设备类型';
 | 
			
		||||
			});
 | 
			
		||||
@@ -267,7 +283,7 @@ export default {
 | 
			
		||||
		handleDelete(row) {
 | 
			
		||||
			const id = row.id;
 | 
			
		||||
			this.$modal
 | 
			
		||||
				.confirm('是否确认删除设备类型编号为"' + id + '"的数据项?')
 | 
			
		||||
				.confirm('是否确认删除设备类型"' + row.name + '"?')
 | 
			
		||||
				.then(function () {
 | 
			
		||||
					return deleteEquipmentType(id);
 | 
			
		||||
				})
 | 
			
		||||
 
 | 
			
		||||
@@ -86,7 +86,8 @@ export default {
 | 
			
		||||
					rangeSeparator: '-',
 | 
			
		||||
					startPlaceholder: '开始时间',
 | 
			
		||||
					endPlaceholder: '结束时间',
 | 
			
		||||
					param: 'createTime',
 | 
			
		||||
					param: 'startTime',
 | 
			
		||||
					valueFormat: 'timestamp'
 | 
			
		||||
				},
 | 
			
		||||
				{
 | 
			
		||||
					type: 'button',
 | 
			
		||||
@@ -126,7 +127,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':
 | 
			
		||||
 
 | 
			
		||||
@@ -43,7 +43,7 @@
 | 
			
		||||
							<el-form-item label="产品类型" prop="typeDictValue">
 | 
			
		||||
								<el-select
 | 
			
		||||
									v-model="dataForm.typeDictValue"
 | 
			
		||||
                  style="width: 100%"
 | 
			
		||||
									style="width: 100%"
 | 
			
		||||
									:disabled="isdetail"
 | 
			
		||||
									placeholder="请选择产品类型">
 | 
			
		||||
									<el-option
 | 
			
		||||
@@ -58,7 +58,7 @@
 | 
			
		||||
							<el-form-item label="单位" prop="unitDictValue">
 | 
			
		||||
								<el-select
 | 
			
		||||
									v-model="dataForm.unitDictValue"
 | 
			
		||||
                  style="width: 100%"
 | 
			
		||||
									style="width: 100%"
 | 
			
		||||
									:disabled="isdetail"
 | 
			
		||||
									placeholder="请选择单位">
 | 
			
		||||
									<el-option
 | 
			
		||||
@@ -83,8 +83,8 @@
 | 
			
		||||
							<el-form-item label="单位平方数" prop="area">
 | 
			
		||||
								<el-input
 | 
			
		||||
									:disabled="isdetail"
 | 
			
		||||
                  v-model="dataForm.area"
 | 
			
		||||
                  placeholder="请输入单位平方数" />
 | 
			
		||||
									v-model="dataForm.area"
 | 
			
		||||
									placeholder="请输入单位平方数" />
 | 
			
		||||
							</el-form-item>
 | 
			
		||||
						</el-col>
 | 
			
		||||
					</el-row>
 | 
			
		||||
@@ -111,6 +111,8 @@
 | 
			
		||||
						:table-props="tableProps"
 | 
			
		||||
						:page="listQuery.pageNo"
 | 
			
		||||
						:limit="listQuery.pageSize"
 | 
			
		||||
						:add-button-show="isdetail ? null : '添加属性'"
 | 
			
		||||
						@emitButtonClick="addNew()"
 | 
			
		||||
						:table-data="productAttributeList">
 | 
			
		||||
						<method-btn
 | 
			
		||||
							v-if="!isdetail"
 | 
			
		||||
@@ -123,15 +125,15 @@
 | 
			
		||||
					<pagination
 | 
			
		||||
						v-show="listQuery.total > 0"
 | 
			
		||||
						:total="listQuery.total"
 | 
			
		||||
						:page.sync="listQuery.current"
 | 
			
		||||
						:limit.sync="listQuery.size"
 | 
			
		||||
						:page.sync="listQuery.pageNo"
 | 
			
		||||
						:limit.sync="listQuery.pageSize"
 | 
			
		||||
						:page-sizes="[5, 10, 15]"
 | 
			
		||||
						@pagination="getList" />
 | 
			
		||||
				</div>
 | 
			
		||||
			</div>
 | 
			
		||||
		</div>
 | 
			
		||||
 | 
			
		||||
		<div style="position: absolute; bottom: 24px; right: 24px">
 | 
			
		||||
		<!-- <div style="position: absolute; bottom: 24px; right: 24px">
 | 
			
		||||
			<el-button style="margin-right: 10px" @click="goback()">返回</el-button>
 | 
			
		||||
			<el-button v-if="isdetail" type="primary" @click="goEdit()">
 | 
			
		||||
				编辑
 | 
			
		||||
@@ -145,6 +147,14 @@
 | 
			
		||||
					添加属性
 | 
			
		||||
				</el-button>
 | 
			
		||||
			</span>
 | 
			
		||||
		</div> -->
 | 
			
		||||
 | 
			
		||||
		<div class="drawer-body__footer">
 | 
			
		||||
			<el-button style="" @click="goback()">取消</el-button>
 | 
			
		||||
			<el-button v-if="isdetail" type="primary" @click="goEdit()">
 | 
			
		||||
				编辑
 | 
			
		||||
			</el-button>
 | 
			
		||||
			<el-button v-else type="primary" @click="dataFormSubmit()">确定</el-button>
 | 
			
		||||
		</div>
 | 
			
		||||
 | 
			
		||||
		<product-attr-add
 | 
			
		||||
@@ -250,12 +260,12 @@ export default {
 | 
			
		||||
					},
 | 
			
		||||
				],
 | 
			
		||||
				area: [
 | 
			
		||||
					// {
 | 
			
		||||
					// 	type: 'float',
 | 
			
		||||
					// 	message: '单位平方数为浮点类型',
 | 
			
		||||
					// 	trigger: 'blur',
 | 
			
		||||
					// 	transfom: 'val => Float(val)',
 | 
			
		||||
					// },
 | 
			
		||||
					{
 | 
			
		||||
						type: 'number',
 | 
			
		||||
						message: '请输入正确的数值',
 | 
			
		||||
						trigger: 'change',
 | 
			
		||||
						transform: (val) => Number(val),
 | 
			
		||||
					},
 | 
			
		||||
				],
 | 
			
		||||
				processTime: [
 | 
			
		||||
					{
 | 
			
		||||
@@ -263,12 +273,12 @@ export default {
 | 
			
		||||
						message: '完成单位产品用时不能为空',
 | 
			
		||||
						trigger: 'blur',
 | 
			
		||||
					},
 | 
			
		||||
					// {
 | 
			
		||||
					// 	type: 'number',
 | 
			
		||||
					// 	message: '完成单位产品用时为浮点类型',
 | 
			
		||||
					// 	trigger: 'blur',
 | 
			
		||||
					// 	transfom: 'val => Number(val)',
 | 
			
		||||
					// },
 | 
			
		||||
					{
 | 
			
		||||
						type: 'number',
 | 
			
		||||
						message: '请输入正确的数值',
 | 
			
		||||
						trigger: 'blur',
 | 
			
		||||
						transform: (val) => Number(val),
 | 
			
		||||
					},
 | 
			
		||||
				],
 | 
			
		||||
			},
 | 
			
		||||
			isdetail: false,
 | 
			
		||||
@@ -277,6 +287,7 @@ export default {
 | 
			
		||||
	methods: {
 | 
			
		||||
		initData() {
 | 
			
		||||
			this.productAttributeList.splice(0);
 | 
			
		||||
			this.listQuery.total = 0;
 | 
			
		||||
		},
 | 
			
		||||
		init(id, isdetail) {
 | 
			
		||||
			this.initData();
 | 
			
		||||
@@ -304,12 +315,10 @@ export default {
 | 
			
		||||
 | 
			
		||||
		getList() {
 | 
			
		||||
			// 获取产品的属性列表
 | 
			
		||||
			const params = {
 | 
			
		||||
				pageSize: 10,
 | 
			
		||||
				pageNo: 1,
 | 
			
		||||
			getProductAttrPage({
 | 
			
		||||
				...this.listQuery,
 | 
			
		||||
				productId: this.dataForm.id,
 | 
			
		||||
			};
 | 
			
		||||
			getProductAttrPage(params).then((response) => {
 | 
			
		||||
			}).then((response) => {
 | 
			
		||||
				this.productAttributeList = response.data.list;
 | 
			
		||||
				this.listQuery.total = response.data.total;
 | 
			
		||||
			});
 | 
			
		||||
@@ -390,6 +399,8 @@ export default {
 | 
			
		||||
<style scoped>
 | 
			
		||||
.drawer >>> .el-drawer {
 | 
			
		||||
	border-radius: 8px 0 0 8px;
 | 
			
		||||
	display: flex;
 | 
			
		||||
	flex-direction: column;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.drawer >>> .el-form-item__label {
 | 
			
		||||
@@ -400,14 +411,20 @@ export default {
 | 
			
		||||
	margin: 0;
 | 
			
		||||
	padding: 32px 32px 24px;
 | 
			
		||||
	border-bottom: 1px solid #dcdfe6;
 | 
			
		||||
	margin-bottom: 30px;
 | 
			
		||||
}
 | 
			
		||||
.drawer >>> .el-drawer__body {
 | 
			
		||||
	flex: 1;
 | 
			
		||||
	height: 1px;
 | 
			
		||||
	display: flex;
 | 
			
		||||
	flex-direction: column;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.drawer >>> .content {
 | 
			
		||||
	padding: 0 24px 30px;
 | 
			
		||||
	padding: 30px 24px;
 | 
			
		||||
	flex: 1;
 | 
			
		||||
	display: flex;
 | 
			
		||||
	flex-direction: column;
 | 
			
		||||
	height: 100%;
 | 
			
		||||
	/* height: 100%; */
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.drawer >>> .visual-part {
 | 
			
		||||
@@ -422,4 +439,10 @@ export default {
 | 
			
		||||
.drawer >>> .attr-list {
 | 
			
		||||
	padding: 0 16px;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.drawer-body__footer {
 | 
			
		||||
	display: flex;
 | 
			
		||||
	justify-content: flex-end;
 | 
			
		||||
	padding: 18px;
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
 
 | 
			
		||||
@@ -7,53 +7,84 @@
 | 
			
		||||
-->
 | 
			
		||||
<template>
 | 
			
		||||
	<el-form
 | 
			
		||||
		class="dialog-inner__form"
 | 
			
		||||
		:model="dataForm"
 | 
			
		||||
		:rules="dataRule"
 | 
			
		||||
		ref="dataForm"
 | 
			
		||||
		@keyup.enter.native="dataFormSubmit()"
 | 
			
		||||
		label-width="90px">
 | 
			
		||||
		<el-form-item label="产线编码" prop="code">
 | 
			
		||||
			<el-input
 | 
			
		||||
				v-model="dataForm.code"
 | 
			
		||||
				clearable
 | 
			
		||||
				placeholder="请输入产线编码" />
 | 
			
		||||
		</el-form-item>
 | 
			
		||||
		<el-form-item label="产线名称" prop="name">
 | 
			
		||||
			<el-input
 | 
			
		||||
				v-model="dataForm.name"
 | 
			
		||||
				clearable
 | 
			
		||||
				placeholder="请输入产线名称" />
 | 
			
		||||
		</el-form-item>
 | 
			
		||||
    <el-form-item prop="factoryId" label="工厂名称">
 | 
			
		||||
      <el-select
 | 
			
		||||
      v-model="dataForm.factoryId" filterable clearable placeholder="请选择工厂">
 | 
			
		||||
        <el-option
 | 
			
		||||
          v-for="item in urlOptions.optionArr.arr0"
 | 
			
		||||
          :key="item.id"
 | 
			
		||||
          :label="item.name"
 | 
			
		||||
          :value="item.id"
 | 
			
		||||
        >
 | 
			
		||||
        </el-option>
 | 
			
		||||
      </el-select>
 | 
			
		||||
    </el-form-item>
 | 
			
		||||
		<el-form-item label="产线TT值(h)" prop="tvalue">
 | 
			
		||||
			<el-input v-model="dataForm.tvalue" clearable placeholder="请输入每小时下片数量" />
 | 
			
		||||
		</el-form-item>
 | 
			
		||||
		<el-form-item label="额外编码" prop="externalCode">
 | 
			
		||||
			<el-input
 | 
			
		||||
				v-model="dataForm.externalCode"
 | 
			
		||||
				clearable
 | 
			
		||||
				placeholder="请输入额外编码" />
 | 
			
		||||
		</el-form-item>
 | 
			
		||||
		<el-form-item label="描述" prop="description">
 | 
			
		||||
			<el-input
 | 
			
		||||
				v-model="dataForm.description"
 | 
			
		||||
				type="textarea"
 | 
			
		||||
				placeholder="请输入内容" />
 | 
			
		||||
		</el-form-item>
 | 
			
		||||
		<el-form-item label="备注" prop="remark">
 | 
			
		||||
			<el-input v-model="dataForm.remark" clearable placeholder="请输入备注" />
 | 
			
		||||
		</el-form-item>
 | 
			
		||||
		<el-row :gutter="20">
 | 
			
		||||
			<el-col :span="12">
 | 
			
		||||
				<el-form-item label="产线编码" prop="code">
 | 
			
		||||
					<el-input
 | 
			
		||||
						v-model="dataForm.code"
 | 
			
		||||
						clearable
 | 
			
		||||
						placeholder="请输入产线编码" />
 | 
			
		||||
				</el-form-item>
 | 
			
		||||
			</el-col>
 | 
			
		||||
			<el-col :span="12">
 | 
			
		||||
				<el-form-item label="产线名称" prop="name">
 | 
			
		||||
					<el-input
 | 
			
		||||
						v-model="dataForm.name"
 | 
			
		||||
						clearable
 | 
			
		||||
						placeholder="请输入产线名称" />
 | 
			
		||||
				</el-form-item>
 | 
			
		||||
			</el-col>
 | 
			
		||||
		</el-row>
 | 
			
		||||
		<el-row :gutter="20">
 | 
			
		||||
			<el-col :span="12">
 | 
			
		||||
				<el-form-item prop="factoryId" label="工厂名称">
 | 
			
		||||
					<el-select
 | 
			
		||||
						v-model="dataForm.factoryId"
 | 
			
		||||
						filterable
 | 
			
		||||
						clearable
 | 
			
		||||
						placeholder="请选择工厂">
 | 
			
		||||
						<el-option
 | 
			
		||||
							v-for="item in urlOptions.optionArr.arr0"
 | 
			
		||||
							:key="item.id"
 | 
			
		||||
							:label="item.name"
 | 
			
		||||
							:value="item.id"></el-option>
 | 
			
		||||
					</el-select>
 | 
			
		||||
				</el-form-item>
 | 
			
		||||
			</el-col>
 | 
			
		||||
			<el-col :span="12">
 | 
			
		||||
				<el-form-item label="产线TT值(h)" prop="tvalue">
 | 
			
		||||
					<el-input
 | 
			
		||||
						v-model="dataForm.tvalue"
 | 
			
		||||
						clearable
 | 
			
		||||
						placeholder="请输入每小时下片数量" />
 | 
			
		||||
				</el-form-item>
 | 
			
		||||
			</el-col>
 | 
			
		||||
		</el-row>
 | 
			
		||||
		<el-row :gutter="20">
 | 
			
		||||
			<el-col :span="12">
 | 
			
		||||
				<el-form-item label="额外编码" prop="externalCode">
 | 
			
		||||
					<el-input
 | 
			
		||||
						v-model="dataForm.externalCode"
 | 
			
		||||
						clearable
 | 
			
		||||
						placeholder="请输入额外编码" />
 | 
			
		||||
				</el-form-item>
 | 
			
		||||
			</el-col>
 | 
			
		||||
			<el-col :span="12">
 | 
			
		||||
				<el-form-item label="备注" prop="remark">
 | 
			
		||||
					<el-input
 | 
			
		||||
						v-model="dataForm.remark"
 | 
			
		||||
						clearable
 | 
			
		||||
						placeholder="请输入备注" />
 | 
			
		||||
				</el-form-item>
 | 
			
		||||
			</el-col>
 | 
			
		||||
		</el-row>
 | 
			
		||||
 | 
			
		||||
		<el-row>
 | 
			
		||||
			<el-col>
 | 
			
		||||
				<el-form-item label="描述" prop="description">
 | 
			
		||||
					<el-input
 | 
			
		||||
						v-model="dataForm.description"
 | 
			
		||||
						type="textarea"
 | 
			
		||||
						placeholder="请输入内容" />
 | 
			
		||||
				</el-form-item>
 | 
			
		||||
			</el-col>
 | 
			
		||||
		</el-row>
 | 
			
		||||
	</el-form>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
@@ -65,22 +96,20 @@ import {
 | 
			
		||||
	getProductionLine,
 | 
			
		||||
	getCode,
 | 
			
		||||
} from '@/api/core/base/productionLine';
 | 
			
		||||
import {
 | 
			
		||||
	getFactoryPage,
 | 
			
		||||
} from '@/api/core/base/factory';
 | 
			
		||||
import { getFactoryPage } from '@/api/core/base/factory';
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
	mixins: [basicAdd],
 | 
			
		||||
	data() {
 | 
			
		||||
		return {
 | 
			
		||||
			urlOptions: {
 | 
			
		||||
        getOption: true,
 | 
			
		||||
			  isGetCode: true,
 | 
			
		||||
        codeURL: getCode,
 | 
			
		||||
				getOption: true,
 | 
			
		||||
				isGetCode: true,
 | 
			
		||||
				codeURL: getCode,
 | 
			
		||||
				createURL: createProductionLine,
 | 
			
		||||
				updateURL: updateProductionLine,
 | 
			
		||||
				infoURL: getProductionLine,
 | 
			
		||||
        optionArrUrl: [getFactoryPage],
 | 
			
		||||
				optionArrUrl: [getFactoryPage],
 | 
			
		||||
			},
 | 
			
		||||
			dataForm: {
 | 
			
		||||
				id: undefined,
 | 
			
		||||
@@ -99,13 +128,26 @@ export default {
 | 
			
		||||
				name: [
 | 
			
		||||
					{ required: true, message: '产线名称不能为空', trigger: 'blur' },
 | 
			
		||||
				],
 | 
			
		||||
        factoryId: [
 | 
			
		||||
				factoryId: [
 | 
			
		||||
					{ required: true, message: '工厂不能为空', trigger: 'change' },
 | 
			
		||||
				],
 | 
			
		||||
				tvalue: [
 | 
			
		||||
					{
 | 
			
		||||
						type: 'number',
 | 
			
		||||
						message: '请输入正确的数字',
 | 
			
		||||
						trigger: 'change',
 | 
			
		||||
						transform: (val) => Number(val),
 | 
			
		||||
					},
 | 
			
		||||
				],
 | 
			
		||||
			},
 | 
			
		||||
		};
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
	},
 | 
			
		||||
	methods: {},
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<style scoped>
 | 
			
		||||
.dialog-inner__form >>> .el-select {
 | 
			
		||||
	width: 100%;
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
 
 | 
			
		||||
@@ -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>
 | 
			
		||||
 
 | 
			
		||||
@@ -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>
 | 
			
		||||
 
 | 
			
		||||
@@ -1,191 +0,0 @@
 | 
			
		||||
 | 
			
		||||
// filename: gantt.vue
 | 
			
		||||
// author: liubin
 | 
			
		||||
// date: 2023 -09 - 25 14: 28: 12
 | 
			
		||||
// description: 甘特图
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
import * as echarts from 'echarts';
 | 
			
		||||
 | 
			
		||||
/**
 | 
			
		||||
 * 
 | 
			
		||||
 * @param {*} params 
 | 
			
		||||
 * @param {*} api 
 | 
			
		||||
 * 
 | 
			
		||||
 * https://echarts.apache.org/zh/option.html#series-custom.renderItem.arguments.params
 | 
			
		||||
 */
 | 
			
		||||
function renderItem(params, api) { }
 | 
			
		||||
 | 
			
		||||
export default class Gantt {
 | 
			
		||||
    constructor(el) {
 | 
			
		||||
        this.chart = echarts.init(el);
 | 
			
		||||
        let options = {
 | 
			
		||||
            series: [
 | 
			
		||||
                {
 | 
			
		||||
                    type: 'custom',
 | 
			
		||||
                    coordinateSystem: 'cartesian2d',
 | 
			
		||||
                    renderItem: renderItem,
 | 
			
		||||
                }
 | 
			
		||||
            ]
 | 
			
		||||
        }
 | 
			
		||||
        this.chart.setOption(options);
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    update(options) {
 | 
			
		||||
        this.chart.setOption(options);
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    resize() {
 | 
			
		||||
        // todo
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    destroy() {
 | 
			
		||||
        this.chart.dispose();
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
var data = [];
 | 
			
		||||
var categories = ['设备1', '设备2', '设备3'];
 | 
			
		||||
var types = [
 | 
			
		||||
    { name: '运行', color: '#7b9ce1' },
 | 
			
		||||
    { name: '故障', color: '#bd6d6c' },
 | 
			
		||||
    { name: '停机', color: '#75d874' },
 | 
			
		||||
];
 | 
			
		||||
//   return new Date(new Date(timestamp).toLocaleDateString()).getTime()
 | 
			
		||||
// })(1691568181000))
 | 
			
		||||
function getStartTime(timestamp) {
 | 
			
		||||
    return new Date(new Date(timestamp).toLocaleDateString()).getTime()
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
data.push({
 | 
			
		||||
    name: 'running',
 | 
			
		||||
    value: [0, 1691568181000, 1691568181000 + 60 * 60 * 1000, 60],
 | 
			
		||||
    itemStyle: {
 | 
			
		||||
        normal: {
 | 
			
		||||
            color: types[0].color
 | 
			
		||||
        }
 | 
			
		||||
    }
 | 
			
		||||
})
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
function renderItem(params, api) {
 | 
			
		||||
    var categoryIndex = api.value(0);
 | 
			
		||||
    var start = api.coord([api.value(1), categoryIndex]);
 | 
			
		||||
    var end = api.coord([api.value(2), categoryIndex]);
 | 
			
		||||
    var height = api.size([0, 1])[1] * 0.8;
 | 
			
		||||
    var rectShape = echarts.graphic.clipRectByRect(
 | 
			
		||||
        {
 | 
			
		||||
            x: start[0],
 | 
			
		||||
            y: start[1] - height / 2,
 | 
			
		||||
            width: end[0] - start[0],
 | 
			
		||||
            height: height
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
            x: params.coordSys.x,
 | 
			
		||||
            y: params.coordSys.y,
 | 
			
		||||
            width: params.coordSys.width,
 | 
			
		||||
            height: params.coordSys.height
 | 
			
		||||
        }
 | 
			
		||||
    );
 | 
			
		||||
    return (
 | 
			
		||||
        rectShape && {
 | 
			
		||||
            type: 'rect',
 | 
			
		||||
            transition: ['shape'],
 | 
			
		||||
            shape: rectShape,
 | 
			
		||||
            style: api.style()
 | 
			
		||||
        }
 | 
			
		||||
    );
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
option = {
 | 
			
		||||
    tooltip: {
 | 
			
		||||
        // show: false,
 | 
			
		||||
        formatter: function (params) {
 | 
			
		||||
            return params.marker + params.name + ': ' + new Date(params.value[1]).toLocaleTimeString() + ' - ' + new Date(params.value[2]).toLocaleTimeString();
 | 
			
		||||
        }
 | 
			
		||||
    },
 | 
			
		||||
    // title: {
 | 
			
		||||
    //   text: 'Profile',
 | 
			
		||||
    //   left: 'center'
 | 
			
		||||
    // },
 | 
			
		||||
    // dataZoom: [
 | 
			
		||||
    //   {
 | 
			
		||||
    //     type: 'slider',
 | 
			
		||||
    //     filterMode: 'weakFilter',
 | 
			
		||||
    //     showDataShadow: false,
 | 
			
		||||
    //     top: 400,
 | 
			
		||||
    //     labelFormatter: ''
 | 
			
		||||
    //   },
 | 
			
		||||
    //   {
 | 
			
		||||
    //     type: 'inside',
 | 
			
		||||
    //     filterMode: 'weakFilter'
 | 
			
		||||
    //   }
 | 
			
		||||
    // ],
 | 
			
		||||
    grid: {
 | 
			
		||||
        height: 300
 | 
			
		||||
    },
 | 
			
		||||
    xAxis: {
 | 
			
		||||
        type: 'time',
 | 
			
		||||
        min: getStartTime(1691568181000),
 | 
			
		||||
        max: getStartTime(1691568181000 + 3600 * 24 * 1000),
 | 
			
		||||
        splitNumber: 10,
 | 
			
		||||
        // interval: 60*3600*1000,
 | 
			
		||||
        // scale: true,
 | 
			
		||||
        axisLabel: {
 | 
			
		||||
            // rotate: -15,
 | 
			
		||||
            formatter: function (val) {
 | 
			
		||||
                return new Date(val).toLocaleTimeString()
 | 
			
		||||
            }
 | 
			
		||||
        },
 | 
			
		||||
        axisTick: {
 | 
			
		||||
            show: true
 | 
			
		||||
        },
 | 
			
		||||
        splitLine: {
 | 
			
		||||
            show: false,
 | 
			
		||||
        }
 | 
			
		||||
    },
 | 
			
		||||
    yAxis: [{
 | 
			
		||||
        axisLine: {
 | 
			
		||||
            // show: false,
 | 
			
		||||
            lineStyle: {
 | 
			
		||||
                color: ''
 | 
			
		||||
            }
 | 
			
		||||
        },
 | 
			
		||||
        axisLabel: {
 | 
			
		||||
            fontSize: 14,
 | 
			
		||||
        },
 | 
			
		||||
        axisTick: {
 | 
			
		||||
            show: false,
 | 
			
		||||
        },
 | 
			
		||||
        splitLine: {
 | 
			
		||||
            show: true
 | 
			
		||||
        },
 | 
			
		||||
        data: categories
 | 
			
		||||
    }, {
 | 
			
		||||
        axisLine: {
 | 
			
		||||
            // show: false,
 | 
			
		||||
            lineStyle: {
 | 
			
		||||
                color: ''
 | 
			
		||||
            }
 | 
			
		||||
        },
 | 
			
		||||
        data: []
 | 
			
		||||
    }],
 | 
			
		||||
    series: [
 | 
			
		||||
        {
 | 
			
		||||
            type: 'custom',
 | 
			
		||||
            renderItem: renderItem,
 | 
			
		||||
            itemStyle: {
 | 
			
		||||
                opacity: 0.8
 | 
			
		||||
            },
 | 
			
		||||
            encode: {
 | 
			
		||||
                x: [1, 2],
 | 
			
		||||
                y: 0
 | 
			
		||||
            },
 | 
			
		||||
            data: data
 | 
			
		||||
        }
 | 
			
		||||
    ]
 | 
			
		||||
};
 | 
			
		||||
@@ -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