.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'
 
 # 路由懒加载

src/api/core/base/lineBindProductLog.js

@@ -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',
+    method: 'post',
-    params: query
+    data
   })
 }
 

src/components/DialogForm/index.vue

@@ -10,6 +10,8 @@
 		ref="form"
 		:model="form"
 		:label-width="`${labelWidth}px`"
+		:size="size"
+		:label-position="labelPosition"
 		v-loading="formLoading">
 		<el-row :gutter="20" v-for="(row, rindex) in rows" :key="rindex">
 			<el-col v-for="col in row" :key="col.label" :span="24 / row.length">
@@ -119,7 +121,15 @@ export default {
 		disabled: {
 			type: Boolean,
 			default: false,
-		}
+		},
+		labelPosition: {
+			type: String,
+			default: 'right',
+		},
+		size: {
+			type: String,
+			default: '',
+		},
 	},
 	data() {
 		return {

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

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

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

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

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

@@ -0,0 +1,313 @@
+<!-- 
+    filename: dialogForm.vue
+    author: liubin
+    date: 2023-08-15 10:32:36
+    description: 弹窗的表单组件
+-->
+
+<template>
+	<el-form
+		ref="form"
+		:model="form"
+		:label-width="`${labelWidth}px`"
+		:size="size"
+		:label-position="labelPosition"
+		v-loading="formLoading">
+		<el-row :gutter="20" v-for="(row, rindex) in rows" :key="rindex">
+			<el-col v-for="col in row" :key="col.label" :span="24 / row.length">
+				<el-form-item :label="col.label" :prop="col.prop" :rules="col.rules">
+					<el-input
+						v-if="col.input"
+						v-model="form[col.prop]"
+						@change="$emit('update', form)"
+						:placeholder="`请输入${col.label}`"
+						v-bind="col.bind" />
+					<el-input
+						v-if="col.textarea"
+						type="textarea"
+						v-model="form[col.prop]"
+						@change="$emit('update', form)"
+						:placeholder="`请输入${col.label}`"
+						v-bind="col.bind" />
+					<el-select
+						v-if="col.select"
+						v-model="form[col.prop]"
+						:placeholder="`请选择${col.label}`"
+						@change="$emit('update', form)"
+						v-bind="col.bind">
+						<el-option
+							v-for="opt in optionListOf[col.prop]"
+							:key="opt.value"
+							:label="opt.label"
+							:value="opt.value" />
+					</el-select>
+					<el-date-picker
+						v-if="col.datetime"
+						v-model="form[col.prop]"
+						type="datetime"
+						:placeholder="`请选择${col.label}`"
+						value-format="timestamp"
+						v-bind="col.bind"></el-date-picker>
+					<el-upload
+						class="upload-in-dialog"
+						v-if="col.upload"
+						:file-list="uploadedFileList"
+						:action="col.url"
+						:on-success="handleUploadSuccess"
+						v-bind="col.bind">
+						<el-button
+							size="small"
+							type="primary"
+							:disabled="col.bind?.disabled || false">
+							点击上传
+						</el-button>
+						<div class="el-upload__tip" slot="tip" v-if="col.uploadTips">
+							{{ col.uploadTips || '只能上传jpg/png文件，大小不超过2MB' }}
+						</div>
+					</el-upload>
+					<el-switch
+						v-if="col.switch"
+						v-model="form[col.prop]"
+						active-color="#0b58ff"
+						inactive-color="#e1e1e1"
+						v-bind="col.bind"></el-switch>
+					<component
+						v-if="col.subcomponent"
+						:key="col.key"
+						:is="col.subcomponent"
+						v-bind="col.bind"
+						:inlineStyle="col.style"></component>
+				</el-form-item>
+			</el-col>
+		</el-row>
+	</el-form>
+</template>
+
+<script>
+/**
+ * 找到最长的label
+ * @param {*} options
+ */
+function findMaxLabelWidth(rows) {
+	let max = 0;
+	rows.forEach((row) => {
+		row.forEach((opt) => {
+			// debugger;
+			if (!opt.label) return 0;
+			if (opt.label.length > max) {
+				max = opt.label.length;
+			}
+		});
+	});
+	return max;
+}
+
+export default {
+	name: 'DialogForm',
+	model: {
+		prop: 'dataForm',
+		event: 'update',
+	},
+	emits: ['update'],
+	components: {},
+	props: {
+		rows: {
+			type: Array,
+			default: () => [],
+		},
+		dataForm: {
+			type: Object,
+			default: () => ({}),
+		},
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+		labelPosition: {
+			type: String,
+			default: 'right',
+		},
+		size: {
+			type: String,
+			default: '',
+		},
+	},
+	data() {
+		return {
+			formLoading: true,
+			optionListOf: {},
+			uploadedFileList: [],
+			dataLoaded: false,
+		};
+	},
+	computed: {
+		labelWidth() {
+			let max = findMaxLabelWidth(this.rows);
+			// 每个汉字占20px
+			return max * 20;
+			// return max * 20 + 'px';
+		},
+		form: {
+			get() {
+				// if (this.dataLoaded) return this.dataForm;
+				// else return {}
+				return this.dataForm;
+			},
+			set(val) {
+				console.log('set form', val);
+			},
+		},
+	},
+	watch: {
+		rows: {
+			handler() {
+				console.log('watch triggered!');
+				this.$nextTick(() => {
+					this.handleOptions('watch');
+				});
+			},
+			deep: true,
+			immediate: false,
+		},
+	},
+	mounted() {
+		// 处理 options
+		this.handleOptions();
+	},
+	methods: {
+		/** 模拟透传 ref  */
+		validate(cb) {
+			return this.$refs.form.validate(cb);
+		},
+		resetFields(args) {
+			return this.$refs.form.resetFields(args);
+		},
+		// getCode
+		async getCode(url) {
+			const response = await this.$axios(url);
+			return response.data;
+		},
+		async handleOptions(trigger = 'monuted') {
+			console.log('[dialogForm:handleOptions]');
+			const promiseList = [];
+			this.rows.forEach((cols) => {
+				cols.forEach((opt) => {
+					if (opt.value && !this.form[opt.prop]) {
+						// 默认值
+						this.form[opt.prop] = opt.value;
+					}
+
+					if (opt.options) {
+						this.$set(this.optionListOf, opt.prop, opt.options);
+					} else if (opt.url) {
+						// 如果有 depends，则暂时先不获取，注册一个watcher
+						if (opt.depends) {
+							console.log('[handleOptions] setting watch');
+							this.$watch(
+								() => this.form[opt.depends],
+								(id) => {
+									console.log('<', opt.depends, '>', 'changed', id);
+									if (id == null) return;
+									// 清空原有选项
+									this.form[opt.prop] = null;
+									// 获取新的选项
+									this.$axios({
+										url: `${opt.url}?id=${id}`,
+									}).then((res) => {
+										this.$set(
+											this.optionListOf,
+											opt.prop,
+											res.data.map((item) => ({
+												label: item[opt.labelKey ?? 'name'],
+												value: item[opt.valueKey ?? 'id'],
+											}))
+										);
+									});
+								},
+								{
+									immediate: true,
+								}
+							);
+							return;
+						}
+						// 如果是下拉框，或者新增模式下的输入框，才去请求
+						if (opt.select || (opt.input && !this.form?.id)) {
+							promiseList.push(async () => {
+								const response = await this.$axios(opt.url, {
+									method: opt.method ?? 'get',
+								});
+								console.log('[dialogForm:handleOptions:response]', response);
+								if (opt.select) {
+									// 处理下拉框选项
+									const list =
+										'list' in response.data
+											? response.data.list
+											: response.data;
+									this.$set(
+										this.optionListOf,
+										opt.prop,
+										list.map((item) => ({
+											label: item[opt.labelKey ?? 'name'],
+											value: item[opt.valueKey ?? 'id'],
+										}))
+									);
+								} else if (opt.input) {
+									console.log('setting code: ', response.data);
+									// 处理输入框数据
+									this.form[opt.prop] = response.data;
+								}
+							});
+						}
+					}
+				});
+			});
+
+			console.log('[dialogForm:handleOptions] done!');
+
+			// 如果是 watch 触发的，不需要执行进一步的请求
+			if (trigger == 'watch') {
+				this.formLoading = false;
+				return;
+			}
+			try {
+				await Promise.all(promiseList.map((fn) => fn()));
+				this.formLoading = false;
+				this.dataLoaded = true;
+				// console.log("[dialogForm:handleOptions:optionListOf]", this.optionListOf)
+			} catch (error) {
+				console.log('[dialogForm:handleOptions:error]', error);
+				this.formLoading = false;
+			}
+			if (!promiseList.length) this.formLoading = false;
+		},
+		// 上传成功的特殊处理
+		beforeUpload() {},
+		// 上传前的验证规则可通过 bind 属性传入
+		handleUploadSuccess(response, file, fileList) {
+			console.log(
+				'[dialogForm:handleUploadSuccess]',
+				response,
+				file,
+				fileList,
+				this.form
+			);
+			// 保存原始文件名
+			if ('fileNames' in this.form) this.form.fileNames.push(file.name);
+			// 保存完整地址
+			if ('fileUrls' in this.form) this.form.fileUrls.push(response.data);
+			this.$modal.msgSuccess('上传成功');
+		},
+
+		getFileName(fileUrl) {
+			return fileUrl.split('/').pop();
+		},
+	},
+};
+</script>
+
+<style scoped lang="scss">
+.el-date-editor,
+.el-select {
+	width: 100%;
+}
+</style>

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

@@ -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"
+							:page="attrQuery?.params.pageNo || 1"
-							:limit="section.pageSize || 10"
+							: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 style="" @click="handleCancel">取消</el-button>
-					返回
-				</el-button>
 				<el-button v-if="mode == 'detail'" type="primary" @click="toggleEdit">
 					编辑
 				</el-button>
-				<span v-else>
+				<el-button v-else type="primary" @click="handleCancel">确定</el-button>
-					<el-button type="primary" @click="handleSave">保存</el-button>
+				<!-- sections的第二项必须是 属性列表  -->
-					<!-- sections的第二项必须是 属性列表  -->
+				<!-- <el-button
-					<el-button
 						v-if="sections[1].allowAdd"
 						type="primary"
 						@click="handleAddAttr">
 						添加属性
-					</el-button>
+					</el-button> -->
-				</span>
 			</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() {
+		submitAttrForm() {
-			this.$refs['attrForm'].validate((valid) => {
+			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) {
+				try {
-				this.closeAttrForm();
+					const isEdit = this.attrForm.id != null;
-				this.$message({
+					this.attrFormSubmitting = true;
-					message: `${isEdit ? '更新' : '创建'}成功`,
+					const res = await this.$axios({
-					type: 'success',
+						url: isEdit
-					duration: 1500,
+							? this.sections[1].urlUpdate
-					onClose: () => {
+							: this.sections[1].urlCreate,
-						this.getAttrList();
+						method: isEdit ? 'put' : 'post',
-					},
+						data: this.attrForm,
-				});
+					});
-			}
+
-			this.attrFormSubmitting = false;
+					if (res.code == 0) {
+						this.closeAttrForm();
+						this.$message({
+							message: `${isEdit ? '更新' : '创建'}成功`,
+							type: 'success',
+							duration: 1500,
+							onClose: () => {
+								this.getAttrList();
+							},
+						});
+					}
+					this.attrFormSubmitting = false;
+				} catch (err) {
+					this.$message({
+						message: err,
+						type: 'error',
+						duration: 1500,
+					});
+					this.attrFormSubmitting = false;
+				}
+			});
 		},
 
 		closeAttrForm() {

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

@@ -36,13 +36,16 @@
 			:dialogVisible="open"
 			@close="cancel"
 			@cancel="cancel"
+			width="60%"
 			@confirm="submitForm">
 			<DialogForm
 				v-if="open"
 				key="index-dialog-form"
 				ref="form"
+				label-position="top"
+				size="small"
 				:dataForm="form"
-				:rows="rows" />
+				:rows="computedRows" />
 		</base-dialog>
 
 		<!-- 设备 详情 - 编辑 -->
@@ -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"
+			@cancel="cancelEdit"
-			@destroy="editVisible = false" />
+			@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,
+				// 		assetUpload: true,
-						label: '上传资料',
+				// 		label: '上传资料',
-						prop: 'uploadFiles',
+				// 		fieldName: 'assets',
-						url: process.env.VUE_APP_BASE_API + '/admin-api/infra/file/upload', // 请求地址
+				// 		subcomponent: AssetsUpload
-						bind: {
+				// 	},
-							headers: { Authorization: 'Bearer ' + getAccessToken() },
+				// ],
-							'show-file-list': false,
+				// [
-						},
+				// 	{
-					},
+				// 		assetUpload: true,
-				],
+				// 		label: '上传图片',
-				[
+				// 		fieldName: 'images',
-					{
+				// 		subcomponent: AssetsUpload
-						diy: true,
+				// 	},
-						key: 'eq-assets',
+				// ],
-						label: '设备资料',
+				// [
-						prop: 'fileNames',
+				// 	{
-						subcomponent: EquipmentAssets,
+				// 		upload: true,
-					},
+				// 		label: '上传资料',
-				],
+				// 		prop: 'uploadFiles',
-				[
+				// 		url: process.env.VUE_APP_BASE_API + '/admin-api/infra/file/upload', // 请求地址
-					{
+				// 		uploadFnName: 'assetsUpload', // 上传方法名
-						diy: true,
+				// 		bind: {
-						key: 'eq-pics',
+				// 			headers: { Authorization: 'Bearer ' + getAccessToken() },
-						label: '设备图片',
+				// 			'show-file-list': false,
-						prop: 'fileUrls',
+				// 		},
-						subcomponent: EquipmentPics,
+				// 	},
-						pictures: async () => {
+				// 	{
-							// some async request
+				// 		diy: true,
-							return [];
+				// 		key: 'eq-assets',
-						},
+				// 		label: '设备资料',
-					},
+				// 		prop: 'fileNames',
-				],
+				// 		subcomponent: EquipmentAssets,
+				// 	},
+				// ],
+				// [
+				// {
+				// 		upload: true,
+				// 		label: '上传图片',
+				// 		prop: 'uploadImages',
+				// 		url: process.env.VUE_APP_BASE_API + '/admin-api/infra/file/upload', // 请求地址
+				// 		uploadFnName: 'imagesUpload', // 上传方法名
+				// 		bind: {
+				// 			headers: { Authorization: 'Bearer ' + getAccessToken() },
+				// 			'show-file-list': false,
+				// 		},
+				// 	},
+				// 	{
+				// 		diy: true,
+				// 		key: 'eq-pics',
+				// 		label: '设备图片',
+				// 		prop: 'fileUrls',
+				// 		subcomponent: EquipmentPics,
+				// 		pictures: async () => {
+				// 			// some async request
+				// 			return [];
+				// 		},
+				// 	},
+				// ],
+				// [
+				// 	{
+				// 		diy: true,
+				// 		key: 'eq-pics',
+				// 		label: '设备图片',
+				// 		prop: 'fileUrls',
+				// 		subcomponent: EquipmentPics,
+				// 		pictures: async () => {
+				// 			// some async request
+				// 			return [];
+				// 		},
+				// 	},
+				// ],
 			],
 			editVisible: false,
 			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(() => {

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

@@ -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: 'name', label: '设备类型名称' },
-				{ prop: 'code', label: '检测类型编码',  },
+				{ prop: 'code', label: '检测类型编码' },
-				{ prop: 'remark', 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);
 				})

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

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

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

@@ -43,7 +43,7 @@
 							<el-form-item label="产品类型" prop="typeDictValue">
 								<el-select
 									v-model="dataForm.typeDictValue"
-                  style="width: 100%"
+									style="width: 100%"
 									:disabled="isdetail"
 									placeholder="请选择产品类型">
 									<el-option
@@ -58,7 +58,7 @@
 							<el-form-item label="单位" prop="unitDictValue">
 								<el-select
 									v-model="dataForm.unitDictValue"
-                  style="width: 100%"
+									style="width: 100%"
 									:disabled="isdetail"
 									placeholder="请选择单位">
 									<el-option
@@ -83,8 +83,8 @@
 							<el-form-item label="单位平方数" prop="area">
 								<el-input
 									:disabled="isdetail"
-                  v-model="dataForm.area"
+									v-model="dataForm.area"
-                  placeholder="请输入单位平方数" />
+									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"
+						:page.sync="listQuery.pageNo"
-						:limit.sync="listQuery.size"
+						: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',
+						type: 'number',
-					// 	message: '单位平方数为浮点类型',
+						message: '请输入正确的数值',
-					// 	trigger: 'blur',
+						trigger: 'change',
-					// 	transfom: 'val => Float(val)',
+						transform: (val) => Number(val),
-					// },
+					},
 				],
 				processTime: [
 					{
@@ -263,12 +273,12 @@ export default {
 						message: '完成单位产品用时不能为空',
 						trigger: 'blur',
 					},
-					// {
+					{
-					// 	type: 'number',
+						type: 'number',
-					// 	message: '完成单位产品用时为浮点类型',
+						message: '请输入正确的数值',
-					// 	trigger: 'blur',
+						trigger: 'blur',
-					// 	transfom: 'val => Number(val)',
+						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 = {
+			getProductAttrPage({
-				pageSize: 10,
+				...this.listQuery,
-				pageNo: 1,
 				productId: this.dataForm.id,
-			};
+			}).then((response) => {
-			getProductAttrPage(params).then((response) => {
 				this.productAttributeList = response.data.list;
 				this.listQuery.total = response.data.total;
 			});
@@ -390,6 +399,8 @@ export default {
 <style scoped>
 .drawer >>> .el-drawer {
 	border-radius: 8px 0 0 8px;
+	display: flex;
+	flex-direction: column;
 }
 
 .drawer >>> .el-form-item__label {
@@ -400,14 +411,20 @@ export default {
 	margin: 0;
 	padding: 32px 32px 24px;
 	border-bottom: 1px solid #dcdfe6;
-	margin-bottom: 30px;
+}
+.drawer >>> .el-drawer__body {
+	flex: 1;
+	height: 1px;
+	display: flex;
+	flex-direction: column;
 }
 
 .drawer >>> .content {
-	padding: 0 24px 30px;
+	padding: 30px 24px;
+	flex: 1;
 	display: flex;
 	flex-direction: column;
-	height: 100%;
+	/* height: 100%; */
 }
 
 .drawer >>> .visual-part {
@@ -422,4 +439,10 @@ export default {
 .drawer >>> .attr-list {
 	padding: 0 16px;
 }
+
+.drawer-body__footer {
+	display: flex;
+	justify-content: flex-end;
+	padding: 18px;
+}
 </style>

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

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

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

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

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

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

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

@@ -29,7 +29,10 @@
 							@emitFun="handleEmitFun"></base-table>
 					</el-tab-pane>
 					<el-tab-pane :label="'\u3000柱状图\u3000'" name="graph">
-						<div v-if="activeName == 'graph'" class="graph" style="height: 40vh; display: flex; flex-direction: column;">
+						<div
+							v-if="activeName == 'graph'"
+							class="graph"
+							style="height: 40vh; display: flex; flex-direction: column">
 							<div class="blue-title">各设备加工数量</div>
 							<LineChart v-if="list && list.length" :list="list" />
 							<div v-else class="no-data-bg"></div>
@@ -87,6 +90,7 @@ export default {
 					rangeSeparator: '-',
 					startPlaceholder: '开始日期',
 					endPlaceholder: '结束日期',
+					defaultTime: ['00:00:00', '23:59:59'],
 					param: 'recordTime',
 					defaultSelect: [
 						new Date(y, m, d)
@@ -246,7 +250,9 @@ export default {
 	created() {
 		this.fillLineOptions();
 		this.fillProductOptions();
-		this.getList();
+	},
+	mounted() {
+		this.$refs['search-bar'].headBtnClick('search');
 	},
 	methods: {
 		handleTabClick(tab, event) {
@@ -307,12 +313,16 @@ export default {
 		},
 
 		handleSearchBarBtnClick(btn) {
-			console.log('handleSearchBarBtnClick', btn);
+			// debugger;
 			switch (btn.btnName) {
 				case 'search':
 					this.queryParams.lineId = btn.lineId;
 					this.queryParams.productId = btn.productId;
-					this.queryParams.recordTime = btn.recordTime ? btn.recordTime.map(time => moment(new Date(time)).format('YYYY-MM-DD HH:mm:ss')) : null;
+					this.queryParams.recordTime = btn.recordTime
+						? btn.recordTime.map((time) =>
+								moment(new Date(time)).format('YYYY-MM-DD HH:mm:ss')
+						  )
+						: null;
 					this.$nextTick(() => {
 						this.getList();
 					});
@@ -388,7 +398,7 @@ export default {
 	font-size: 14px;
 
 	&::before {
-		content: "";
+		content: '';
 		position: absolute;
 		left: 0;
 		top: 6px;
@@ -398,5 +408,4 @@ export default {
 		background: #0b58ff;
 	}
 }
-
 </style>

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

@@ -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
-        }
-    ]
-};

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

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

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

@@ -1,497 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-	<meta charset="UTF-8" />
-	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-	<title>Document</title>
-</head>
-
-<body>
-	<div id="app" style="width: 100vw; height: 80vh; background: #fff; margin: 24px"></div>
-
-	<script src="./echarts.js"></script>
-	<script>
-		function getStartTime(timestamp) {
-			return new Date(new Date(timestamp).toLocaleDateString()).getTime();
-		}
-
-		function renderItem(params, api) {
-			var categoryIndex = api.value(0);
-			var start = api.coord([api.value(1), categoryIndex]);
-			var end = api.coord([api.value(2), categoryIndex]);
-			console.log(`
-                    categoryIndex: ${categoryIndex},
-                    start: ${start},
-                    end: ${end},
-                    api.value0: ${api.value(0)}
-                    api.value1: ${api.value(1)}
-                    api.value2: ${api.value(2)}
-                    params.coordSys: ${JSON.stringify(params.coordSys)}
-                    api.size: ${api.size([0, 1])}
-                    api.style(): ${JSON.stringify(api.style())}
-                `);
-
-			var height = api.size([0, 1])[1] * 2;
-			// 用一个矩形去截取另一个矩形
-			var rectShape = echarts.graphic.clipRectByRect(
-				// 被截取矩形
-				{
-					x: start[0],
-					y: start[1] - height / 2,
-					width: end[0] - start[0],
-					height: height,
-				},
-				// {x: 0, y: 0, width: 2000, height: 60 } // <== 也行...
-				// 截取矩形
-				{
-					// 截取掉grid以外的部分，实质是计算方块的偏移量
-					x: params.coordSys.x, // {number} grid rect 的 x
-					// y: params.coordSys.y, // {number} grid rect 的 y
-					y: params.coordSys.y - 16, // {number} grid rect 的 y，并多减掉 16 个单位
-					// width: end[0] - start[0],
-					width: params.coordSys.width, // {number} grid rect 的 width
-					height: params.coordSys.height, // {number} grid rect 的 height
-				}
-			);
-			console.log(`------------- ${JSON.stringify(rectShape)} -------------- `)
-			return (
-				rectShape && {
-					type: 'rect',
-					transition: ['shape'],
-					shape: rectShape,
-					style: api.style(),
-				}
-			);
-		}
-
-		function getXaxisRange(startTime) {
-			return Array(24)
-				.fill(startTime)
-				.map((item, index) => {
-					return new Date(item + index * 3600 * 1000)
-						.toLocaleTimeString()
-						.split(':')
-						.slice(0, 2)
-						.join(':');
-				});
-		}
-
-		function getTodayStart(today) {
-			const [y, m, d] = [
-				today.getFullYear(),
-				today.getMonth(),
-				today.getDate(),
-			];
-			return new Date(y, m, d).getTime();
-		}
-
-		/** 颜色配置 */
-		const types = [
-			{ name: '运行', color: '#288AFF' },
-			{ name: '故障', color: '#FC9C91' },
-			{ name: '计划停机', color: '#FFDC94' },
-			{ name: '空白', color: '#F2F4F9' },
-		];
-
-		const option = {
-			tooltip: {
-				trigger: 'item',
-				axisPointer: {
-					type: 'none',
-					// label: {
-					// 	backgroundColor: '#6a7985',
-					// },
-				},
-				formatter: (params) => {
-					// console.log('formatter', params)
-					// return `
-					// <div>${new Date(params[0].value[1]).toLocaleString()} ~ ${new Date(params[0].value[2]).toLocaleString()}</div>
-					// <div style="display: flex; justify-content: space-between; min-width: 128px; align-items: center;">
-					//     <span>${params[0].seriesName}</span>
-					//     <span>${params[0].name}</span>
-					// </div>
-					// `
-					return `
-						<div style="display: flex; align-items: center; justify-content: space-between">
-						<h1 style="font-size: 18px; font-weight: 600;">${params.seriesName}</h1>
-                        <h2 style="font-size: 18px; font-weight: 400; letter-spacing: 1px;">${params.name} <span style="display: inline-block; margin-left: 8px; width: 12px; height: 12px; border-radius: 50%; background: ${params.color} "></span></h2>
-                        </div>
-						<div>${new Date(params.value[1]).toLocaleString()} ~ ${new Date(params.value[2]).toLocaleString()}</div>
-                        `
-				}
-			},
-			grid: [
-				{
-					id: 0,
-					top: 10,
-					left: 128,
-					right: 64,
-					height: 56,
-				},
-				// {
-				// 	id: 1,
-				// 	top: 80,
-				// 	height: 56,
-				// },
-				// ***************** 添加第二个grid *****************
-				{
-					id: 1,
-					top: 180,
-					left: 128,
-					right: 64,
-					height: 56
-				}
-			],
-			xAxis: [
-				{
-					id: 'asdf',
-					gridIndex: 0,
-					axisTick: {
-						alignWithLabel: true,
-						inside: true,
-					},
-					type: 'time',
-					min: getTodayStart(new Date()), // <===
-					max: getStartTime(new Date().getTime() + 3600 * 24 * 1000), // <===
-					splitNumber: 10,
-					axisLabel: {
-						margin: 12,
-						// rotate: -15,
-						formatter: function (val) {
-							return new Date(val)
-								.toLocaleTimeString()
-								.split(':')
-								.slice(0, 2)
-								.join(':');
-						},
-					},
-					boundaryGap: false,
-					// data: getXaxisRange(getTodayStart(new Date())),
-				},
-				{
-					id: 'asdff',
-					gridIndex: 0,
-					axisLabel: { show: false },
-					axisLine: { show: false },
-				},
-				// ***************** 添加第二个 xAxis *****************
-				{
-					id: 'asdfjk',
-					gridIndex: 1,
-					axisTick: {
-						alignWithLabel: true,
-						inside: true,
-					},
-					type: 'time',
-					min: getTodayStart(new Date()), // <===
-					max: getStartTime(new Date().getTime() + 3600 * 24 * 1000), // <===
-					splitNumber: 10,
-					axisLabel: {
-						margin: 12,
-						// rotate: -15,
-						formatter: function (val) {
-							return new Date(val)
-								.toLocaleTimeString()
-								.split(':')
-								.slice(0, 2)
-								.join(':');
-						},
-					},
-					boundaryGap: false,
-					// data: getXaxisRange(getTodayStart(new Date())),
-				},
-				{
-					id: 'fjkd',
-					gridIndex: 1,
-					axisLabel: { show: false },
-					axisLine: { show: false },
-				},
-			],
-			yAxis: [
-				// 主y轴
-				{
-					id: 0,
-					gridIndex: 0,
-					type: 'value',
-					splitLine: { show: false },
-					name: '设备1',
-					nameLocation: 'center',
-					nameGap: 56,
-					nameRotate: 0,
-					nameTextStyle: {
-						fontSize: 18,
-					},
-					axisLine: {
-						show: true,
-						lineStyle: {},
-					},
-					axisLabel: { show: false },
-					axisTick: { show: false },
-				},
-				// 辅y轴
-				{
-					id: 1,
-					gridIndex: 0,
-					type: 'value',
-					splitLine: { show: false },
-					axisLabel: { show: false },
-					axisTick: { show: false },
-				},
-				// ***************** 添加第二个 yAxis *****************
-				{
-					id: 2,
-					gridIndex: 1,
-					type: 'value',
-					splitLine: { show: false },
-					name: '设备1',
-					nameLocation: 'center',
-					nameGap: 56,
-					nameRotate: 0,
-					nameTextStyle: {
-						fontSize: 18,
-					},
-					axisLine: {
-						show: true,
-						lineStyle: {},
-					},
-					axisLabel: { show: false },
-					axisTick: { show: false },
-				},
-				// 辅y轴
-				{
-					id: 3,
-					gridIndex: 1,
-					type: 'value',
-					splitLine: { show: false },
-					axisLabel: { show: false },
-					axisTick: { show: false },
-				},
-			],
-			series: [
-				{
-					// 沉默的背景
-					xAxisIndex: 0,
-					yAxisIndex: 0,
-					type: 'custom',
-					renderItem: renderItem,
-					silent: true,
-					itemStyle: {
-						opacity: 0.8,
-					},
-					encode: {
-						x: [1, 2],
-						y: 0,
-					},
-					data: [
-						{
-							name: '无数据',
-							value: [0, 1696694400000, 1696780800000, 0],
-							tooltip: { show: false },
-							// silent: true,
-							// animation: false,
-							// universalTransition: { enable: false },
-							// hoverAnimation: false,
-							// selectMode: true,
-							// select: { disabled: true },
-							// emphasis: { disabled: false, focus: 'none', itemStyle: { opacity: 0 } },
-							// z: 0,
-							// zlevel: 0,
-							// emphasis: { disabled: true },
-							itemStyle: {
-								color: '#ccc',
-								opacity: 0.3,
-							}
-						}
-					]
-				},
-				{
-					name: '设备1',
-					xAxisIndex: 0,
-					yAxisIndex: 0,
-					type: 'custom',
-					renderItem: renderItem,
-					itemStyle: {
-						opacity: 0.8,
-					},
-					encode: {
-						x: [1, 2],
-						y: 0,
-					},
-					data: [
-						{
-							name: '运行',
-							value: [0, 1696694400000, 1696699400000, 0],
-							itemStyle: {
-								normal: {
-									color: types[0].color,
-								},
-							},
-						},
-						{
-							name: '运行',
-							value: [0, 1696730000000, 1696734040450, 0],
-							itemStyle: {
-								normal: {
-									color: types[0].color,
-								},
-							},
-						},
-						{
-							name: '故障',
-							value: [0, 1696737040000, 1696754040450, 0],
-							itemStyle: {
-								normal: {
-									color: types[1].color,
-								},
-							},
-						},
-						{
-							name: '计划停机',
-							value: [0, 1696755000000, 1696759000000, 0],
-							itemStyle: {
-								normal: {
-									color: types[2].color,
-								},
-							},
-						},
-						{
-							name: '运行',
-							value: [0, 1696759000000, 1696769000000, 0],
-							itemStyle: {
-								normal: {
-									color: types[0].color,
-								},
-							},
-						},
-						{
-							name: '计划停机',
-							value: [0, 1696769400000, 1696779000000, 0],
-							itemStyle: {
-								normal: {
-									color: types[2].color,
-								},
-							},
-						},
-					],
-				},
-				// ***************** 添加第二个设备 *****************
-				{
-					// 沉默的背景
-					xAxisIndex: 2,
-					yAxisIndex: 2,
-					type: 'custom',
-					renderItem: renderItem,
-					silent: true,
-					itemStyle: {
-						opacity: 0.8,
-					},
-					encode: {
-						x: [1, 2],
-						y: 0,
-					},
-					data: [
-						{
-							name: '无数据',
-							value: [0, 1696694400000, 1696780800000, 0],
-							tooltip: { show: false },
-							// silent: true,
-							// animation: false,
-							// universalTransition: { enable: false },
-							// hoverAnimation: false,
-							// selectMode: true,
-							// select: { disabled: true },
-							// emphasis: { disabled: false, focus: 'none', itemStyle: { opacity: 0 } },
-							// z: 0,
-							// zlevel: 0,
-							// emphasis: { disabled: true },
-							itemStyle: {
-								color: '#ccc',
-								opacity: 0.3,
-							}
-						}
-					]
-				},
-				{
-					name: '设备2',
-					xAxisIndex: 2,
-					yAxisIndex: 2,
-					type: 'custom',
-					renderItem: renderItem,
-					itemStyle: {
-						opacity: 0.8,
-					},
-					encode: {
-						x: [1, 2],
-						y: 0,
-					},
-					data: [
-						{
-							name: '运行',
-							value: [0, 1696694400000, 1696699400000, 0],
-							itemStyle: {
-								normal: {
-									color: types[0].color,
-								},
-							},
-							// showBackground: true,
-						},
-						{
-							name: '运行',
-							value: [0, 1696730000000, 1696734040450, 0],
-							itemStyle: {
-								normal: {
-									color: types[0].color,
-								},
-							},
-						},
-						{
-							name: '故障',
-							value: [0, 1696737040000, 1696754040450, 0],
-							itemStyle: {
-								normal: {
-									color: types[1].color,
-								},
-							},
-						},
-						{
-							name: '计划停机',
-							value: [0, 1696755000000, 1696759000000, 0],
-							itemStyle: {
-								normal: {
-									color: types[2].color,
-								},
-							},
-						},
-						{
-							name: '运行',
-							value: [0, 1696759000000, 1696769000000, 0],
-							itemStyle: {
-								normal: {
-									color: types[0].color,
-								},
-							},
-						},
-						{
-							name: '计划停机',
-							value: [0, 1696769400000, 1696779000000, 0],
-							itemStyle: {
-								normal: {
-									color: types[2].color,
-								},
-							},
-						},
-					],
-				},
-			],
-		};
-
-		const el = document.getElementById('app');
-		const myChart = echarts.init(el);
-
-		console.log('mychart', myChart);
-		myChart.setOption(option);
-	</script>
-</body>
-
-</html>