update 小修改“

Reviewed-on: mt-fe-group/mt-yd-ui#4

.dockerignore

@@ -0,0 +1,7 @@
+.vscode/
+.idea/
+node_modules/
+dist/
+**/*.log
+LICENSE
+README.md

.drone.yml

@@ -0,0 +1,52 @@
+---
+kind: pipeline
+type: docker
+name: default
+
+steps:
+- name: build
+  image: docker:dind
+  volumes:
+  - name: dockersock
+    path: /var/run/docker.sock
+  - name: dockerconfig
+    path: /root/.docker
+  commands:
+  - docker build -t harbor.picaiba.com/kszny/mes-ui:1.0.0-india ./ && docker push harbor.picaiba.com/kszny/mes-ui:1.0.0-india
+
+- name: deploy
+  image: harbor.picaiba.com/tools/kubectl:1.19.8
+  commands:
+  - echo "172.27.0.20 lb.kubesphere.local" >> /etc/hosts
+  #- echo "52.74.223.119 github.com" >> /etc/hosts
+  - sleep 1
+  - kubectl scale --replicas=0 deployment/mes-ui -n mes-india
+  - sleep 3
+  - kubectl scale --replicas=1 deployment/mes-ui -n mes-india
+  depends_on:
+  - build
+
+- name: notification
+  image: lddsb/drone-dingtalk-message
+  settings:
+    token: 37a6483274f6de648a26d6710e4d8160eb7d471752abb2d70f8b7958af58fe11
+    type: markdown
+    secret: SEC83b10f5fefd6127e4073360d4447bb7276a90386aeee1275b2797dd377a903e7
+    tpl: http://res.picaiba.com/msg/msg.md
+    tips_title: 你有新消息
+    success_color: 008800
+    failure_color: FF0000
+
+volumes:
+- name: dockersock
+  host:
+    path: /var/run/docker.sock
+- name: dockerconfig
+  host:
+    path: /root/.docker
+
+trigger:
+  branch:
+  - develop
+  event:
+  - push

AddOrUpdateConfig.md

@@ -2,6 +2,82 @@
 
 > 通过传入合理的配置项来使用 addOrUpdate Dialog
 
+## 用途
+
+通过给对话框传递配置项，并自动根据这些配置项来初始化对话框的功能
+
+## props
+
+- configs 对象
+
+```
+<my-dialog :configs="SomeConfigs" ... />
+
+
+type Operation = {
+		name: 'add' | 'edit' | 'detail' | 'delete' | ...,
+		url: string, /** 该操作需要的接口地址，如删除接口 */
+		showAlways: boolean,
+		showOnEdit: boolean,
+		permission: string,
+	}
+
+type SubTableConfig = {
+		[_:string]: any,
+		title: string, /** 表格的名称 */
+		url: string, /** 涉及的接口 */
+		tableConfigs: {
+			[_:string]: any,
+			type?: 'index' | ...,
+			prop: string,
+			name: string,
+			rules?: any[],
+			fixed?: string,
+			width?: string,
+			subcomponent: VueComponent,
+			options: any[],
+			formField: boolean, /** 是否在新增编辑子表单里出现该字段 */
+		}[], /** 表格prop配置数组，参考 components/base-table 组件和 element-ui 文档 */
+	}
+
+type ExtraComponent = {
+		name: string,
+		label: string,
+		hasModel: boolean, /** 是否需要为该组件设置 v-model */
+		component: VueComponent, /** 动态加载的 vue 组件 */
+		props: {
+			[_:string]: string | object
+			extraParams?: { /** 上传组件使用 */
+				typeCode: string
+			}
+		}[]
+	}
+
+type Field = {
+	[_:string]: string | boolean | object | object[],
+	name: string,
+	type?: 'input' | 'select' | ...,
+	options?: any[], /** 设置 type 为 select 时的选项数据 */
+	label?: string, /** 没有时会用 name 替代 */
+	placeholder?: string, /** 没有时会生成默认占位符 */
+	api?: string, /** 如果有该字段，就自动从api地址获取数据并填充到对应的输入框里，一般为 getCode 的接口 */
+	relatedField?: string, /** 关联字段，当设置此字段时，意味着需要在对话框组件上监听 select-change 事件，并当该字段数据被改变时刷新 relatedField 的列表，一般是像选择产线时更新工段列表这样的场景使用 */,
+	required?: boolean, /** 验证规则的简写，只需要限制必填项时，不需要其他验证规则时使用 */
+	rules?: object[], /** 规则设置参考 element-ui 的表单验证配置 */
+}
+
+type Configs = {
+	type: 'dialog',
+	infoUrl: string, /** 编辑时获取信息的接口地址 */
+	fields: Field[],
+	extraComponents?: ExtraComponent[],
+	subtable?: SubTableConfig[],
+	operations?: Operation[]
+}
+
+
+```
+
 ## 示例
 
 ```js
@@ -79,7 +155,7 @@ const addOrUpdateConfigs = {
 }
 ```
 
-## 配置项
+## 配置项解释
 
 <br>
 
@@ -136,6 +212,7 @@ const addOrUpdateConfigs = {
 含义：有些对话框里需要额外的表格来展示更深层次的数据，如“产品属性”
 类型：object
 选项：
+
 - title, 内嵌表格的标题
 - url, 内嵌表格的数据地址
 - tableConfigs，内嵌表格的配置选项
@@ -154,13 +231,14 @@ const addOrUpdateConfigs = {
       - 值：`edit` | `delete` | `detail`，需要其他可自行添加（修改 base-table 组件）
 
 ### extraComponents
+
 含义: 需要在对话框里使用的自定义组件列表
 类型: Array<object>
 对象选项：
- - name: 该组件对应的 dataForm 字段（需要参照后端文档来指定）
- - hasModel: boolean, 上传组件一般设置为 false，设置是否和 dataForm 关联
- - label
- - fieldType: 设置该组件的数据将以什么数据类型形式来保存
- - component: 组件
- - props 传给组件的配置
- 
+
+- name: 该组件对应的 dataForm 字段（需要参照后端文档来指定）
+- hasModel: boolean, 上传组件一般设置为 false，设置是否和 dataForm 关联
+- label
+- fieldType: 设置该组件的数据将以什么数据类型形式来保存
+- component: 组件
+- props 传给组件的配置

Dockerfile

@@ -0,0 +1,10 @@
+FROM node:12 AS builder
+WORKDIR /app
+ADD package.json /app/
+RUN npm config set registry https://registry.npmmirror.com && npm install 
+ADD . /app
+RUN npm run build:prod
+
+FROM busybox
+LABEL maintainer thomas.hairong@gmail.com
+COPY --from=builder /app/dist /html

src/components/base-dialog/AttrForm/index.vue

@@ -9,6 +9,8 @@
 				:is="require('../../base-table/index.vue').default"
 				:table-head-configs="filterTableConfigs()"
 				:data="dataList"
+				:page="pageIndex"
+				:size="pageSize"
 				:max-height="calcMaxHeight(8)"
 				@operate-event="handleOperations"
 			/>
@@ -125,18 +127,11 @@ export default {
 		}
 	},
 	methods: {
-		/** filter tableConfigs */
 		filterTableConfigs() {
-			// return this.tableConfigs.map(item => {
-			// 	const {prop, name, filter} = item
-			// 	const newConfigs = {prop,name,filter}
-			// 	if (item.type) newConfigs.type = item.type
-			// 	if (item.fixed) newConfigs.fixed = item.fixed
-			// 	if (item.width) newConfigs.width = item.width
-			// 	if (item.subcomponent) newConfigs.subcomponent = item.subcomponent
-			// 	if (item.options) newConfigs.options = item.options
-			// 	return newConfigs
-			// })
+			if (this.isDetail) {
+				/** 如果是查看详情，就屏蔽操作列 */
+				return this.tableConfigs.filter(opt => opt.prop !== 'operations')
+			}
 			return this.tableConfigs
 		},
 		/** init dataform */

src/components/base-dialog/addOrUpdate/index.vue

@@ -1,5 +1,12 @@
 <template>
-	<el-dialog class="super-flexible-dialog" :title="isDetail ? title.detail : !dataForm.id ? title.add : title.edit" :visible.sync="visible" @close="handleClose">
+	<el-dialog
+		class="super-flexible-dialog"
+		:title="isDetail ? title.detail : !dataForm.id ? title.add : title.edit"
+		:visible.sync="visible"
+		@close="handleClose"
+		:distory-on-close="true"
+		:close-on-click-modal="false"
+	>
 		<div style="max-height: 60vh; overflow-y: scroll; overflow-x: hidden;">
 			<el-form ref="dataForm" :model="dataForm" :rules="dataFormRules">
 				<!-- 如果需要更精细一点的布局，可以根据配置项实现地再复杂一点，但此处暂时全部采用一行两列布局  -->
@@ -31,7 +38,7 @@
 								:disabled="isDetail"
 								@change="emitSelectChange(configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name, $event)"
 							>
-								<el-option v-for="opt in configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].options" :key="opt.label" :label="opt.label" :value="opt.value" />
+								<el-option v-for="opt in configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].options" :key="opt.label + Math.random()" :label="opt.label" :value="opt.value" />
 							</el-select>
 							<el-switch v-if="getType(n, c) === 'switch'" v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]" :disabled="isDetail" />
 							<el-cascader
@@ -40,6 +47,7 @@
 								:options="configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].options"
 								:props="configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].props"
 								:disabled="isDetail"
+								clearable
 							/>
 							<el-time-select v-if="getType(n, c) === 'time'" v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]" :disabled="isDetail" />
 							<el-date-picker
@@ -106,6 +114,7 @@
 import CKEditor from 'ckeditor4-vue'
 import AttrForm from '../AttrForm'
 import { pick } from 'lodash/object'
+import { pick as __pick } from '@/utils/filters'
 import i18n from '@/i18n'
 // 标题 for i18n
 const title = {
@@ -140,13 +149,6 @@ export default {
 	components: { AttrForm },
 	props: {
 		configs: {
-			/**
-			 * TODO: 定义及使用方式，应改用README.md文件记录
-			 * type: 'dialog' | 'drawer' | 'page'
-			 * fields: Array<string|object>
-			 * - fields.object: { name, type: 'number'|'textarea'|'select'|'date'|.., required: boolean,  validator: boolean(是否需要验证), [options]: any[], api: string(自动获取数据的接口，一般为getcode接口)}
-			 * operations: Array[object], 操作名和对应的接口地址，还有permission(如，sys:dict:update)
-			 */
 			type: Object,
 			default: () => ({}) // 此处省去类型检查，使用者自行注意就好
 		}
@@ -254,11 +256,27 @@ export default {
 					})
 				} // end if (item.api)
 
+				// 如果有 relatedField，就需要在当前item的数据加载后，刷新 relatedField 的列表
+				if (item.relatedField) {
+					this.$watch(
+						function() {
+							return this.dataForm[item.name]
+						},
+						function(val, old) {
+							if (val && val !== old) {
+								this.$emit('select-change', { name: item.name, id: val })
+							}
+						},
+						{ deep: true, immediate: true }
+					)
+				}
+
 				if (item.required) {
 					const requiredRule = {
 						required: true,
 						message: i18n.t('validate.required'),
-						trigger: 'change'
+						// trigger: 'change'
+						trigger: 'blur'
 					}
 					/** 检查是否已经存在该字段的规则 */
 					const exists = this.dataFormRules[item.name] || null
@@ -301,7 +319,8 @@ export default {
 			/** 检查是否需要额外的组件 */
 			this.configs.extraComponents &&
 				this.configs.extraComponents.forEach(item => {
-					if (Object.hasOwn(this.dataForm, [item.name])) {
+					// if (Object.hasOwn(this.dataForm, [item.name])) {
+					if (this.dataForm.hasOwnProperty(item.name)) {
 						return
 					} else {
 						this.$set(this.dataForm, [item.name], calDefault(item.fieldType))
@@ -328,6 +347,11 @@ export default {
 		},
 
 		getPlaceholder(n, c) {
+			if (this.isDetail) {
+				/** 如果是详情，就不展示 提示文本 */
+				return ''
+			}
+
 			const opt = this.configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)]
 			if (opt) {
 				// if opt is valid
@@ -376,18 +400,20 @@ export default {
 					}).then(({ data: res }) => {
 						if (res && res.code === 0) {
 							const dataFormKeys = Object.keys(this.dataForm)
-							console.log('data form keys: ', dataFormKeys, pick(res.data, dataFormKeys))
-							this.dataForm = pick(res.data, dataFormKeys)
-
+							console.log('keys ===> ', dataFormKeys)
+							// console.log('data form keys: ', dataFormKeys, pick(res.data, dataFormKeys))
+							this.dataForm = __pick(res.data, dataFormKeys)
+							console.log('pick(res.data, dataFormKeys) ===> ', __pick(res.data, dataFormKeys))
 							// LABEL: FILE_RELATED
 							/** 对文件下载进行分流 */
 							this.fileList = {}
 							if (this.dataForm.files) {
-								console.log('files: ', this.dataForm.files)
+								// console.log('files: ', this.dataForm.files)
 								this.dataForm.files.forEach(file => {
 									// const fileName = file.fileUrl.split('/').pop()
 									/** [1] 处理 fileList */
-									if (Object.hasOwn(this.fileList, file.typeCode)) {
+									// if (Object.hasOwn(this.fileList, file.typeCode)) {
+									if (this.fileList.hasOwnProperty(file.typeCode)) {
 										/** 已存在 */
 										// this.fileList[file.typeCode].push({ id: file.id, name: fileName, typeCode: file.typeCode })
 										this.fileList[file.typeCode].push(file)
@@ -397,7 +423,8 @@ export default {
 									}
 
 									/** [2] 处理 fileForm */
-									if (Object.hasOwn(this.fileForm, file.typeCode)) {
+									// if (Object.hasOwn(this.fileForm, file.typeCode)) {
+									if (this.fileForm.hasOwnProperty(file.typeCode)) {
 										this.fileForm[file.typeCode].push(file.id)
 									} else {
 										this.fileForm[file.typeCode] = [file.id]
@@ -418,12 +445,17 @@ export default {
 								})
 								// console.log('create new, dataform', JSON.stringify(this.dataForm))
 							}
+							this.shouldWait = null
 						})
 				}
 			})
 		},
 
 		emitSelectChange(name, id) {
+			const currentField = this.configs.fields.find(item => item.name === name)
+			if (currentField.relatedField) {
+				this.dataForm[currentField.relatedField] = null
+			}
 			this.$emit('select-change', { name, id })
 		},
 
@@ -458,7 +490,7 @@ export default {
 								this.$set(this.dataForm, 'fileIds', fileIds)
 							}
 
-							console.log('before send: ', this.dataForm)
+							// console.log('before send: ', this.dataForm)
 
 							this.$http({
 								url: this.$http.adornUrl(urls[btn.name].url),
@@ -503,7 +535,7 @@ export default {
 					}
 					break
 				case 'cancel':
-					this.visible = false
+					this.handleClose()
 				// add more..
 			}
 		},

src/components/base-table/components/operationComponent.js

@@ -19,7 +19,8 @@ export default {
       colors: {
         delete: '#FF5454',
         preview: '#f09843',
-        design: '#99089f'
+        design: '#99089f',
+        // 'view-trend': 'red'
         // add more...
       },
       text: {
@@ -30,6 +31,7 @@ export default {
         viewAttr: i18n.t('viewattr'),
         preview: i18n.t('preview'),
         design: i18n.t('design'),
+        'view-trend': '查看趋势'
         // add more...
       }
     }

src/components/base-table/index.vue

@@ -20,6 +20,9 @@
 					:header-align="head.align || 'center'"
 					:align="head.align || 'center'"
 					:width="head.width || 50"
+					:index="head.type === 'index' ? val => {
+						return val + 1 + (page - 1) * size
+					} : null"
 					v-bind="head.more"
 				></el-table-column>
 				<!-- 普通的表头 -->
@@ -74,9 +77,17 @@ export default {
 		spanMethod: {
 			type: Function,
 			default: () => {
-				() => [0, 0]
+				;() => [0, 0]
 			},
 			required: false
+		},
+		page: {
+			type: Number,
+			default: 1
+		},
+		size: {
+			type: Number,
+			default: 10
 		}
 	},
 	filters: {

src/components/base-upload/index.vue

@@ -58,14 +58,14 @@ export default {
 
 		this.$watch('uploaderInjectFileList', function(val) {
 			if (val && val.length) {
-				console.log('this.uploaderInjectFileList', this.uploaderInjectFileList)
+				// console.log('this.uploaderInjectFileList', this.uploaderInjectFileList)
 				/** uploaderInjectFileList 里关于文件的信息比较全，需要手动过滤一下 */
 				this.fileList = val.map(item => {
 					const name = item.fileUrl.split('/').pop()
 					return { ...pick(item, ['id', 'fileName', 'typeCode']), name }
 				})
 			}
-			console.log('fillist: ', this.fileList)
+			// console.log('fillist: ', this.fileList)
 		})
 
 		// if (this.parentDataForm) {
@@ -111,7 +111,7 @@ export default {
 
 		/** 图片验证，由配置文件开启 */
 		validateImage(file) {
-			console.log('[*] 验证图片')
+			// console.log('[*] 验证图片')
 
 			const isRightSize = file.size / 1024 / 1024 < 2
 			if (!isRightSize) {
@@ -146,10 +146,10 @@ export default {
 				responseType: 'blob'
 			}).then(({ data: res }) => {
 				const blob = new Blob([res])
-				console.log('blob', blob)
+				// console.log('blob', blob)
 				if ('download' in document.createElement('a')) {
 					const alink = document.createElement('a')
-					console.log('filename: ', fileName)
+					// console.log('filename: ', fileName)
 					alink.download = fileName
 					alink.style.display = 'none'
 					alink.target = '_blank'

src/i18n/en.js

@@ -17,6 +17,7 @@ t.routes['质量管理'] = 'Quality Management'
 t.routes['权限管理'] = 'Permission Management'
 t.routes['系统设置'] = 'System Settings'
 t.routes['日志管理'] = 'Log Management'
+t.routes['数据分析'] = 'Data Analysis'
 
 // 二级
 t.routes['厂务'] = 'Factory Affair'
@@ -30,8 +31,11 @@ t.routes['质量检查实时数据'] = 'Realtime Quality Inspection Data'
 t.routes['报表总览'] = 'Report Overview'
 t.routes['报表分类'] = 'Report Types'
 t.routes['报表详情'] = 'Report Detail'
+t.routes['报表设计'] = 'Report Design'
+t.routes['报表预览'] = 'Report Preview'
 t.routes['质量检测基础数据'] = 'Quality Inspection Basic Data'
 t.routes['当前检测数据'] = 'Current Inspection Data'
+t.routes['检测统计数据'] = 'Statistics Data'
 t.routes['质量检查信息记录'] = 'Quality Inspection Records'
 t.routes['用户管理'] = 'User Management'
 t.routes['部门管理'] = 'Department Management'
@@ -42,6 +46,9 @@ t.routes['定时任务'] = 'Timed Tasks'
 t.routes['文件上传'] = 'File Upload'
 t.routes['登录日志'] = 'Login Records'
 t.routes['操作日志'] = 'Oprations Records'
+t.routes['设备效率分析'] = 'Equipment Efficiency Analysis'
+t.routes['设备异常分析'] = 'Equipment Exceptions Analysis'
+t.routes['设备状态时序图'] = 'Equipment Status Timesequence'
 
 // 三级
 t.routes['工厂'] = 'Factory'
@@ -52,10 +59,19 @@ t.routes['设备分组'] = 'Equipment Groups'
 t.routes['设备信息'] = 'Equipment Details'
 t.routes['设备参数状态监控'] = 'Current Equipment State'
 t.routes['设备分组报警信息'] = 'Equipment Group Alarm'
+t.routes['设备历史参数'] = 'Equipment Historical Parameters'
 t.routes['质量检测类型'] = 'Quality Inpection Types'
 t.routes['质量检测信息'] = 'Quality Inpection Details'
+t.routes['安灯检测盒'] = 'Andeng inspection box'
 
 
+t.andeng = {}
+t.andeng.inspectContent = 'Inspection Content'
+t.andeng.btnVal = 'Button Value'
+t.andeng.btnBoxModel = 'Button Box Model'
+
+
+t.dictValueList = 'View Details'
 t.save = 'Save'
 t.add = 'Add'
 t.delete = 'Delete'
@@ -150,6 +166,10 @@ t.all = 'All'
 t.reset = 'Reset'
 t.preview = 'Preview'
 t.design = 'Design'
+t.timetype = 'Time Type'
+t.reftimerange = 'By time range'
+t.refdate = 'By date'
+t.hour = 'Hour(s)'
 
 t.errors = {}
 t.errors.nosection = 'There is no sections on this product line.'
@@ -162,9 +182,10 @@ t.hints.select = 'Please select '
 t.hints.date = 'Please select date'
 t.hints.checktime = 'Please select inspection time'
 t.hints.number = 'Please input correct number'
+t.hints.integer = 'Please input correct integer'
 t.hints.addr = 'Please input address'
-t.hints.upload2m = 'File size cannot be larger than 2mb (2048kb)'
-t.hints.upload2mPic = 'Image files only. File size cannot be larger than 2mb (2048kb)'
+t.hints.upload2m = 'File size cannot be larger than 2MB (2048KB)'
+t.hints.upload2mPic = 'Image files only. File size cannot be larger than 2MB (2048KB)'
 
 t.factory = {}
 t.factory.title = 'Factory'
@@ -178,14 +199,15 @@ t.prod.code = 'Product Code'
 t.prod.type = 'Product Type'
 t.prod.area = 'Area'
 t.prod.spec = 'Product Specification'
-t.prod.attr = 'Dynamic Attributes'
+t.prod.attr = 'Attributes'
 t.prod.attrcode = 'Attribute Code'
 t.prod.attrcodeHints = 'Please input attribute code'
 t.prod.attrname = 'Attribute Node'
 t.prod.attrnameHints = 'Please input attribute name'
 t.prod.attrvalueHints = 'Please input attribute value'
 t.prod.descHints = 'Please input description'
-t.prod.processTime = 'Processing Time (Hours)'
+// t.prod.processTime = 'Processing Time (Hours)'
+t.prod.processTime = 'Processing Time (s)'
 t.prod.processTimeHints = 'Please input processing time'
 t.prod.relatedPid = 'Related Product'
 
@@ -200,6 +222,10 @@ t.alarm.level = 'Alarm Level'
 t.alarm.content = 'Alarm Content'
 t.alarm.source = 'Alarm Source'
 t.alarm.det = 'Alarm Details'
+t.alarm.externalCode = 'External Code'
+t.alarm.description = 'Description'
+t.alarm.remark = 'Remark'
+
 
 t.report = {}
 t.report.name = 'Report Name'
@@ -219,7 +245,7 @@ t.inspect.typetotal = 'Total Inspection Types'
 t.inspect.typename = 'Inspection Type'
 t.inspect.typecode = 'Inspection Code'
 t.inspect.ioTotal = 'Data of input/output and total inspections'
-t.inspect.plTotal = 'Inspection types per line'
+t.inspect.plTotal = 'Inspection contents in each line'
 t.inspect.inTotal = 'Up Sum'
 t.inspect.outTotal = 'Down Sum'
 t.inspect.checkTotal = 'Total Inspections'
@@ -238,17 +264,18 @@ t.realtime.num = 'scrap quantity'
 t.realtime.rate = 'scrap rate'
 t.realtime.total = 'total production'
 t.realtime.goodrate = 'Passed Rate'
-t.realtime.runState = '是否运行'
-t.realtime.state = '状态'
-t.realtime.hasFault = '是否故障'
-t.realtime.recentParamValue = '参数近期值'
-t.realtime.view = '查看'
-t.realtime.input = '投入数'
-t.realtime.output = '产出数'
-t.realtime.eqName = '设备名称'
-t.realtime.eqCode = '设备编码'
-t.realtime.productionSnapshotTime = '生产量记录时间'
-t.realtime.statusSnapshotTime = '状态记录时间'
+t.realtime.runState = 'running state'
+t.realtime.state = 'status'
+t.realtime.hasFault = 'malfunction'
+t.realtime.recentParamValue = 'recent parameters'
+t.realtime.view = 'view'
+t.realtime.input = 'input' //'投入数'
+t.realtime.output = 'output' //'产出数'
+t.realtime.eqName = 'Equipment name'
+t.realtime.eqCode = 'Equipment cdoe'
+t.realtime.productionSnapshotTime = 'production recording time' // '生产量记录时间'
+t.realtime.statusSnapshotTime = 'status recording time' // '状态记录时间'
+t.realtime.refresh = 'Refresh data...'
 
 
 t.ws = {}
@@ -257,7 +284,8 @@ t.ws.id = 'Work Section ID'
 t.ws.name = 'Work Section Name'
 t.ws.code = 'Work Section Code'
 t.ws.binded = 'Binded Equipments'
-t.ws.unbind = 'Please select an equipment to bind.'
+t.ws.unbind = 'Equipment Name'
+t.ws.eqbindplaceholder = 'Select an equipment'
 t.ws.sort = 'sort'
 t.ws.setorder = 'Please input order of equipments in the work section.'
 t.ws.bind = 'bind'
@@ -300,6 +328,40 @@ t.eq.port = 'Port'
 t.eq.type = 'Type'
 t.eq.typecode = 'Type Code'
 t.eq.parent = 'Parent'
+t.eq.mtbf = 'Mean time between failures[MTBF] (h)'
+t.eq.mttr = 'Mean time to repair[MTTR] (h)'
+t.eq.efficienttimeh = 'Working time(h)'
+t.eq.shutdowntimeh = 'Off time(h)'
+t.eq.worktimeh = 'Working time(h)'
+t.eq.downtimeh = 'Malfunction duration(h)'
+t.eq.stoptimeh = 'Halt duration(h)'
+t.eq.worktime = 'Functioning duration'
+t.eq.stoptime = 'Halt duration'
+t.eq.downtime = 'Malfunction duration'
+t.eq.downcount = 'Malfunction counts'
+t.eq.downrate = 'Malfunction rates'
+t.eq.stoplost = 'Lost'
+t.eq.ratio = 'percentage'
+t.eq.time = 'time'
+t.eq.timetrend = 'trend'
+t.eq.nogap = 'no interval'
+t.eq.monthgap = 'by month'
+t.eq.daygap = 'by day'
+t.eq.weekgap = 'by week'
+t.eq.hourgap = 'by hour'
+t.eq.workdurationratio = 'Functioning duration ratio' // '工作时长比率'
+t.eq.stopdurationratio = 'Halt duration ratio' // '停机时长比率'
+t.eq.stopratio = 'Halt ratio' // '停机比率'
+t.eq.downdurationratio = 'Malfunction duration ratio' // '故障时长比率'
+t.eq.speedefficiency = 'Speed launch rate' //'速度开动率'
+t.eq.speedlost = 'Speed lost'
+t.eq.timeefficiency = 'Time launch rate' //'时间开动率'
+t.eq.year = 'year'
+t.eq.month = 'month'
+t.eq.realyield = 'Actual processing speed'
+t.eq.designyield = 'Theoretical processing speed'
+t.eq.viewtrend = 'View Trends'
+
 
 
 t.pl = {}
@@ -312,6 +374,7 @@ t.pl.belong = 'Product Line'
 t.pl.tvalue = 'TT Value'
 t.pl.factoryHints = 'Please select a factory'
 
+
 t.prompt = {}
 t.prompt.title = 'Prompt'
 t.prompt.info = 'Are you sure to {handle}?'
@@ -319,6 +382,7 @@ t.prompt.sure = 'Are you sure to delete this record?'
 t.prompt.success = 'success'
 t.prompt.failed = 'failed'
 t.prompt.deleteBatch = 'Please choose items to delete.'
+t.prompt.month = 'Please choose month'
 
 t.validate = {}
 t.validate.required = 'This is required.'
@@ -334,6 +398,8 @@ t.datePicker = {}
 t.datePicker.range = 'to'
 t.datePicker.start = 'Start Time'
 t.datePicker.end = 'End Time'
+t.datePicker.starttime = 'Start Time'
+t.datePicker.endtime = 'End Time'
 
 t.fullscreen = {}
 t.fullscreen.prompt = 'This operation is not supported by your browser.'

src/i18n/zh-CN.js

@@ -18,6 +18,7 @@ t.routes['质量管理'] = '质量管理'
 t.routes['权限管理'] = '权限管理'
 t.routes['系统设置'] = '系统设置'
 t.routes['日志管理'] = '日志管理'
+t.routes['数据分析'] = '数据分析'
 
 // 二级
 t.routes['厂务'] = '厂务'
@@ -31,8 +32,11 @@ t.routes['质量检查实时数据'] = '质量检查实时数据'
 t.routes['报表总览'] = '报表总览'
 t.routes['报表分类'] = '报表分类'
 t.routes['报表详情'] = '报表详情'
+t.routes['报表设计'] = '报表设计'
+t.routes['报表预览'] = '报表预览'
 t.routes['质量检测基础数据'] = '质量检测基础数据'
 t.routes['当前检测数据'] = '当前检测数据'
+t.routes['检测统计数据'] = '检测统计数据'
 t.routes['质量检查信息记录'] = '质量检查信息记录'
 t.routes['用户管理'] = '用户管理'
 t.routes['部门管理'] = '部门管理'
@@ -43,6 +47,9 @@ t.routes['定时任务'] = '定时任务'
 t.routes['文件上传'] = '文件上传'
 t.routes['登录日志'] = '登录日志'
 t.routes['操作日志'] = '操作日志'
+t.routes['设备效率分析'] = '设备效率分析'
+t.routes['设备异常分析'] = '设备异常分析'
+t.routes['设备状态时序图'] = '设备状态时序图'
 
 // 三级
 t.routes['工厂'] = '工厂'
@@ -53,13 +60,18 @@ t.routes['设备分组'] = '设备分组'
 t.routes['设备信息'] = '设备信息'
 t.routes['设备参数状态监控'] = '设备参数状态监控'
 t.routes['设备分组报警信息'] = '设备分组报警信息'
+t.routes['设备历史参数'] = '设备历史参数'
 t.routes['质量检测类型'] = '质量检测类型'
 t.routes['质量检测信息'] = '质量检测信息'
+t.routes['安灯检测盒'] = '安灯检测盒'
+
+t.andeng = {}
+t.andeng.inspectContent = '检测内容'
+t.andeng.btnVal = '按钮值'
+t.andeng.btnBoxModel = '按钮盒模式'
 
 
-
-
-
+t.dictValueList = '查看值列表'
 t.save = '保存'
 t.add = '新增' // 1
 t.delete = '删除' // 1
@@ -155,6 +167,10 @@ t.all = '全部'
 t.reset = '重置'
 t.preview = '预览'
 t.design = '设计'
+t.timetype = '时间类型'
+t.reftimerange = '按时间段'
+t.refdate = '按日期'
+t.hour = '小时'
 
 t.errors = {}
 t.errors.nosection = '该产线没有工段'
@@ -167,9 +183,10 @@ t.hints.select = '请选择'
 t.hints.date = '请选择日期'
 t.hints.checktime = '请选择检测时间'
 t.hints.number = '请输入正确的数值'
+t.hints.integer = '请输入正确的整数'
 t.hints.addr = '请输入地址'
-t.hints.upload2m = '上传文件大小不要超过 2mb (2048kb)'
-t.hints.upload2mPic = '上传图片文件，且大小不要超过 2mb (2048kb)'
+t.hints.upload2m = '上传文件大小不要超过 2MB (2048KB)'
+t.hints.upload2mPic = '上传图片文件，且大小不要超过 2MB (2048KB)'
 
 t.factory = {}
 t.factory.title = '工厂'
@@ -183,15 +200,17 @@ t.prod.code = '产品编码'
 t.prod.type = '产品类型'
 t.prod.area = '单位平方数'
 t.prod.spec = '规格'
-t.prod.attr = '动态属性'
+t.prod.attr = '属性'
 t.prod.attrcode = '属性编码'
 t.prod.attrcodeHints = '请输入属性编码'
 t.prod.attrname = '属性名称'
 t.prod.attrnameHints = '请输入属性名称'
 t.prod.attrvalueHints = '请输入属性值'
 t.prod.descHints = '请输入描述'
-t.prod.processTime = '加工时间 (h)'
-t.prod.processTimeHints = '请输入加工时间'
+// t.prod.processTime = '加工时间 (h)'
+t.prod.processTime = '产线完成单位产品用时 (s)'
+t.prod.processTimeHints = '请输入完成单位产品用时'
+// t.prod.processTimeHints = '请输入加工时间'
 t.prod.relatedPid = '关联产品'
 
 t.alarm = {}
@@ -205,6 +224,9 @@ t.alarm.level = '报警级别'
 t.alarm.content = '报警内容'
 t.alarm.source = '报警来源'
 t.alarm.det = '报警详细内容'
+t.alarm.externalCode = '外部编码'
+t.alarm.description = '描述'
+t.alarm.remark = '备注'
 
 t.report = {}
 t.report.name = '报表名称'
@@ -224,7 +246,7 @@ t.inspect.typetotal = '检测类型总数'
 t.inspect.typename = '检测类型名称'
 t.inspect.typecode = '检测类型编码'
 t.inspect.ioTotal = '上下片及检测总数统计'
-t.inspect.plTotal = '各产线检测类型统计'
+t.inspect.plTotal = '各产线检测内容统计'
 t.inspect.inTotal = '上片总数'
 t.inspect.outTotal = '下片总数'
 t.inspect.checkTotal = '检测总数'
@@ -254,6 +276,7 @@ t.realtime.eqName = '设备名称'
 t.realtime.eqCode = '设备编码'
 t.realtime.productionSnapshotTime = '生产量记录时间'
 t.realtime.statusSnapshotTime = '状态记录时间'
+t.realtime.refresh = '刷新数据'
 
 
 t.ws = {}
@@ -262,8 +285,9 @@ t.ws.id = '工段ID'
 t.ws.name = '工段名称'
 t.ws.code = '工段编码'
 t.ws.binded = '已绑定的设备'
-t.ws.unbind = '选择一个设备进行绑定'
-t.ws.sort = '排序'
+t.ws.unbind = '设备名称'
+t.ws.eqbindplaceholder = '选择一个设备进行绑定'
+t.ws.sort = '工段排序'
 t.ws.setorder = '请输入工段中设备的顺序'
 t.ws.bind = '绑定'
 t.ws.eqbind = '设备绑定'
@@ -305,6 +329,39 @@ t.eq.port = '端口'
 t.eq.type = '类型名称'
 t.eq.typecode = '类型编码'
 t.eq.parent = '父类'
+t.eq.mtbf = '平均故障间隔时间[MTBF] (h)'
+t.eq.mttr = '平均维修时间[MTTR] (h)'
+t.eq.efficienttimeh = '有效时间(h)'
+t.eq.shutdowntimeh = '关机时间(h)'
+t.eq.worktimeh = '工作时长(h)'
+t.eq.downtimeh = '故障时长(h)'
+t.eq.stoptimeh = '停机时长(h)'
+t.eq.worktime = '工作时长'
+t.eq.stoptime = '停机时长'
+t.eq.downtime = '故障时长'
+t.eq.downcount = '故障次数'
+t.eq.downrate = '故障比率'
+t.eq.stoplost = '中断损失'
+t.eq.ratio = '百分比'
+t.eq.time = '时间'
+t.eq.timetrend = '时间区间走势'
+t.eq.nogap = '无间隔'
+t.eq.monthgap = '按月'
+t.eq.daygap = '按天'
+t.eq.weekgap = '按周'
+t.eq.hourgap = '按小时'
+t.eq.workdurationratio = '工作时长比率'
+t.eq.stopdurationratio = '停机时长比率'
+t.eq.stopratio = '停机比率'
+t.eq.downdurationratio = '故障时长比率'
+t.eq.speedefficiency = '速度开动率'
+t.eq.speedlost = '速度损失'
+t.eq.timeefficiency = '时间开动率'
+t.eq.year='年'
+t.eq.month='月'
+t.eq.realyield = '实际加工速度'
+t.eq.designyield = '理论加工速度' 
+t.eq.viewtrend = '查看趋势' 
 
 
 t.pl = {}
@@ -324,6 +381,7 @@ t.prompt.sure = '确定删除这条记录吗?'
 t.prompt.success = '操作成功'
 t.prompt.failed = '操作失败'
 t.prompt.deleteBatch = '请选择删除项'
+t.prompt.month = '请选择月份'
 
 t.validate = {}
 t.validate.required = '必填项不能为空'
@@ -339,6 +397,8 @@ t.datePicker = {}
 t.datePicker.range = '至'
 t.datePicker.start = '开始日期'
 t.datePicker.end = '结束日期'
+t.datePicker.starttime = '开始时间'
+t.datePicker.endtime = '结束时间'
 
 t.fullscreen = {}
 t.fullscreen.prompt = '您的浏览器不支持此操作'

src/router/index.js

@@ -168,7 +168,7 @@ function fnAddDynamicMenuRoutes(menuList = [], routes = []) {
     // 菜单的国际化
     menuList[i].name = i18n.t(`routes["${menuList[i].name}"]`)
 
-    console.log('route ===', route.meta.title)
+    // console.log('route ===', route.meta.title)
     // eslint-disable-next-line
     let URL = (menuList[i].url || '').replace(/{{([^}}]+)?}}/g, (s1, s2) => eval(s2)) // URL支持{{ window.xxx }}占位符变量
     if (isURL(URL)) {

src/utils/filters.js

@@ -10,3 +10,15 @@ export const dictFilter = dictTypeId => {
 export const timeFilter = (val) => {
 	return moment(val).format('YYYY-MM-DD HH:mm:ss')
 }
+
+export const pick = (obj, paths) => {
+	let result = {}
+	paths.forEach(key => {
+		if (obj.hasOwnProperty(key)) {
+			result[key] = obj[key];
+		} else {
+			result[key] = null
+		}
+	})
+	return result
+}

src/utils/request.js

@@ -8,8 +8,9 @@ import merge from 'lodash/merge'
 
 const http = axios.create({
   // baseURL: window.SITE_CONFIG['apiURL'],
-  // baseURL: '/api',
-  baseURL: process.env.NODE_ENV === 'production' ? '/api' : '/yd-monitor',
+  baseURL: '/api',
+  // baseURL: '/yd-monitor',
+  // baseURL: process.env.NODE_ENV === 'production' ? '/api' : '/yd-monitor',
   timeout: 1000 * 180,
   withCredentials: true
 })

src/views/main-navbar.vue

@@ -1,36 +1,20 @@
 <template>
-	<nav
-		class="aui-navbar"
-		:class="`aui-navbar--${$store.state.navbarLayoutType}`"
-	>
+	<nav class="aui-navbar" :class="`aui-navbar--${$store.state.navbarLayoutType}`">
 		<div class="aui-navbar__header">
 			<h1 class="aui-navbar__brand" @click="$router.push({ name: 'home' })">
-				<a class="aui-navbar__brand-lg" href="javascript:;">{{
-					$t('brand.lg')
-				}}</a>
-				<a class="aui-navbar__brand-mini" href="javascript:;">{{
-					$t('brand.mini')
-				}}</a>
+				<a class="aui-navbar__brand-lg" href="javascript:;">{{ $t('brand.lg') }}</a>
+				<a class="aui-navbar__brand-mini" href="javascript:;">{{ $t('brand.mini') }}</a>
 			</h1>
 		</div>
 		<div class="aui-navbar__body">
 			<el-menu class="aui-navbar__menu mr-auto" mode="horizontal">
-				<el-menu-item
-					index="1"
-					@click="$store.state.sidebarFold = !$store.state.sidebarFold"
-				>
-					<svg
-						class="icon-svg aui-navbar__icon-menu aui-navbar__icon-menu--switch"
-						aria-hidden="true"
-					>
+				<el-menu-item index="1" @click="$store.state.sidebarFold = !$store.state.sidebarFold">
+					<svg class="icon-svg aui-navbar__icon-menu aui-navbar__icon-menu--switch" aria-hidden="true">
 						<use xlink:href="#icon-outdent"></use>
 					</svg>
 				</el-menu-item>
 				<el-menu-item index="2" @click="refresh()">
-					<svg
-						class="icon-svg aui-navbar__icon-menu aui-navbar__icon-menu--refresh"
-						aria-hidden="true"
-					>
+					<svg class="icon-svg aui-navbar__icon-menu aui-navbar__icon-menu--refresh" aria-hidden="true">
 						<use xlink:href="#icon-sync"></use>
 					</svg>
 				</el-menu-item>
@@ -47,11 +31,7 @@
 					</a>
 				</el-menu-item> -->
 				<el-menu-item index="3">
-					<el-dropdown
-						placement="bottom"
-						:show-timeout="0"
-						@command="handleCommand"
-					>
+					<el-dropdown placement="bottom" :show-timeout="0" @command="handleCommand">
 						<span class="el-dropdown-link">
 							<svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true">
 								<use xlink:href="#icon-earth"></use>
@@ -59,12 +39,8 @@
 							<!-- <i class="el-icon-arrow-down el-icon--right"></i> -->
 						</span>
 						<el-dropdown-menu slot="dropdown">
-							<el-dropdown-item :disabled="getLang() === 'zh-CN'" command="toCN"
-								>中文</el-dropdown-item
-							>
-							<el-dropdown-item :disabled="getLang() === 'en'" command="toEN"
-								>En</el-dropdown-item
-							>
+							<el-dropdown-item :disabled="getLang() === 'zh-CN'" command="toCN">中文</el-dropdown-item>
+							<el-dropdown-item :disabled="getLang() === 'en'" command="toEN">En</el-dropdown-item>
 						</el-dropdown-menu>
 					</el-dropdown>
 				</el-menu-item>
@@ -81,22 +57,15 @@
 							<i class="el-icon-arrow-down"></i>
 						</span>
 						<el-dropdown-menu slot="dropdown">
-							<el-dropdown-item @click.native="updatePasswordHandle()">{{
-								$t('updatePassword.title')
-							}}</el-dropdown-item>
-							<el-dropdown-item @click.native="logoutHandle()">{{
-								$t('logout')
-							}}</el-dropdown-item>
+							<el-dropdown-item @click.native="updatePasswordHandle()">{{ $t('updatePassword.title') }}</el-dropdown-item>
+							<el-dropdown-item @click.native="logoutHandle()">{{ $t('logout') }}</el-dropdown-item>
 						</el-dropdown-menu>
 					</el-dropdown>
 				</el-menu-item>
 			</el-menu>
 		</div>
 		<!-- 弹窗, 修改密码 -->
-		<update-password
-			v-if="updatePasswordVisible"
-			ref="updatePassword"
-		></update-password>
+		<update-password v-if="updatePasswordVisible" ref="updatePassword"></update-password>
 	</nav>
 </template>
 <script>
@@ -128,11 +97,11 @@ export default {
 					this.$root.$i18n.locale = 'zh-CN'
 					window.navigator.language = 'zh-cn'
 					break
-					case 'toEN':
-						console.log('root', this.$root.$i18n.locale)
-						this.$root.$i18n.locale = 'en'
-						location.reload()
-						window.navigator.language = 'en-US'
+				case 'toEN':
+					console.log('root', this.$root.$i18n.locale)
+					this.$root.$i18n.locale = 'en'
+					location.reload()
+					window.navigator.language = 'en-US'
 					break
 			}
 		},
@@ -156,15 +125,11 @@ export default {
 		},
 		// 退出
 		logoutHandle() {
-			this.$confirm(
-				this.$t('prompt.info', { handle: this.$t('logout') }),
-				this.$t('prompt.title'),
-				{
-					confirmButtonText: this.$t('confirm'),
-					cancelButtonText: this.$t('cancel'),
-					type: 'warning'
-				}
-			)
+			this.$confirm(this.$t('prompt.info', { handle: this.$t('logout') }), this.$t('prompt.title'), {
+				confirmButtonText: this.$t('confirm'),
+				cancelButtonText: this.$t('cancel'),
+				type: 'warning'
+			})
 				.then(() => {
 					this.$http
 						.post(this.$http.adornUrl('/logout'))

src/views/modules/job/schedule-add-or-update.vue

@@ -58,6 +58,12 @@ export default {
     }
   },
   methods: {
+		// destroy dialog
+		handleDestroyDialog() {
+			setTimeout(() => {
+				this.addOrUpdateVisible= false
+			}, /** after dialog animated */ 200);
+		},
     init () {
       this.visible = true
       this.$nextTick(() => {

src/views/modules/job/schedule-log.vue

@@ -1,11 +1,11 @@
 <template>
   <el-dialog :visible.sync="visible" :title="$t('schedule.log')" :close-on-click-modal="false" :close-on-press-escape="false" width="75%">
-    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+    <el-form :inline="true" :model="dataForm" @keyup.enter.native="currentChangeHandle(1)">
       <el-form-item>
         <el-input v-model="dataForm.jobId" :placeholder="$t('schedule.jobId')" clearable></el-input>
       </el-form-item>
       <el-form-item>
-        <el-button @click="getDataList()">{{ $t('query') }}</el-button>
+        <el-button @click="currentChangeHandle(1)">{{ $t('query') }}</el-button>
       </el-form-item>
     </el-form>
     <el-table
@@ -56,6 +56,12 @@ export default {
     }
   },
   methods: {
+		// destroy dialog
+		handleDestroyDialog() {
+			setTimeout(() => {
+				this.addOrUpdateVisible= false
+			}, /** after dialog animated */ 200);
+		},
     init () {
       this.visible = true
       this.getDataList()

src/views/modules/job/schedule.vue

@@ -1,12 +1,12 @@
 <template>
   <el-card shadow="never" class="aui-card--fill">
     <div class="mod-job__schedule">
-      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+      <el-form :inline="true" :model="dataForm" @keyup.enter.native="currentChangeHandle(1)">
         <el-form-item>
           <el-input v-model="dataForm.beanName" :placeholder="$t('schedule.beanName')" clearable></el-input>
         </el-form-item>
         <el-form-item>
-          <el-button @click="getDataList()">{{ $t('query') }}</el-button>
+          <el-button @click="currentChangeHandle(1)">{{ $t('query') }}</el-button>
         </el-form-item>
         <el-form-item>
           <el-button v-if="$hasPermission('sys:schedule:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
@@ -97,6 +97,12 @@ export default {
     Log
   },
   methods: {
+		// destroy dialog
+		handleDestroyDialog() {
+			setTimeout(() => {
+				this.addOrUpdateVisible= false
+			}, /** after dialog animated */ 200);
+		},
     // 暂停
     pauseHandle (id) {
       if (!id && this.dataListSelections.length <= 0) {

src/views/modules/monitoring/equipment.vue

@@ -1,17 +1,25 @@
 <template>
 	<div class="mod-config">
-		<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+		<el-form :inline="true" :model="dataForm" @keyup.enter.native="currentChangeHandle(1)">
 			<el-form-item>
 				<el-input v-model="dataForm.key" :placeholder="$t('eq.name') + ' / ' + $t('eq.code')" clearable></el-input>
 			</el-form-item>
 			<el-form-item>
-				<el-button @click="getDataList()">{{ $t('search') }}</el-button>
+				<el-button @click="currentChangeHandle(1)">{{ $t('search') }}</el-button>
 				<el-button v-if="$hasPermission('monitoring:equipment:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
 				<el-button v-if="$hasPermission('monitoring:equipment:export')" @click="exportHandle()">{{ $t('export') }}</el-button>
 			</el-form-item>
 		</el-form>
 
-		<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" @operate-event="handleOperations" @refreshDataList="getDataList" />
+		<base-table
+			:page="pageIndex"
+			:size="pageSize"
+			:data="dataList"
+			:table-head-configs="tableConfigs"
+			:max-height="calcMaxHeight(8)"
+			@operate-event="handleOperations"
+			@refreshDataList="getDataList"
+		/>
 		<el-pagination
 			@size-change="sizeChangeHandle"
 			@current-change="currentChangeHandle"
@@ -22,7 +30,14 @@
 			layout="total, sizes, prev, pager, next, jumper"
 		></el-pagination>
 		<!-- 弹窗, 新增 / 修改 -->
-		<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" :configs="addOrUpdateConfigs" @refreshDataList="getDataList" @destory-dialog="addOrUpdateVisible = false" />
+		<add-or-update
+			v-if="addOrUpdateVisible"
+			ref="addOrUpdate"
+			:configs="addOrUpdateConfigs"
+			@refreshDataList="getDataList"
+			@select-change="handleDialogSelectChange"
+			@destory-dialog="handleDestroyDialog"
+		/>
 	</div>
 </template>
 
@@ -54,6 +69,8 @@ const tableConfigs = [
 	{ prop: 'groupName', name: i18n.t('eq.group') },
 	{ prop: 'enName', name: i18n.t('enname') },
 	{ prop: 'abbr', name: i18n.t('abbr') },
+	{ prop: 'lineName', name: i18n.t('pl.title') },
+	{ prop: 'sectionName', name: i18n.t('ws.title') },
 	{
 		prop: 'details',
 		name: i18n.t('detail'),
@@ -75,7 +92,7 @@ const addOrUpdateConfigs = {
 	infoUrl: '/monitoring/equipment',
 	fields: [
 		{ name: 'name', label: i18n.t('eq.name'), required: true },
-		{ name: 'code', label: i18n.t('eq.code') },
+		{ name: 'code', label: i18n.t('eq.code'), required: true, api: '/monitoring/equipment/getCode' },
 		{ name: 'enName', label: i18n.t('enname') },
 		{ name: 'abbr', label: i18n.t('abbr') },
 		{
@@ -85,6 +102,27 @@ const addOrUpdateConfigs = {
 			type: 'select',
 			options: []
 		},
+		{
+			name: 'lineId',
+			label: i18n.t('pl.title'),
+			required: true,
+			type: 'select',
+			options: [],
+			relatedField: 'sectionId' // 关联下面的id，在更换lineId时，会清空相应的sectionId选择结果
+		},
+		{
+			name: 'sectionId',
+			label: i18n.t('ws.title'),
+			required: true,
+			type: 'select',
+			options: []
+		},
+		{
+			name: 'sort',
+			label: i18n.t('ws.sort'),
+			type: 'number',
+			rules: [{ type: 'number', message: i18n.t('hints.number'), trigger: 'blur', transform: val => Number(val) }]
+		},
 		{
 			name: 'groupId',
 			label: i18n.t('eq.group'),
@@ -263,9 +301,52 @@ export default {
 		console.log('activated')
 		this.getDataList()
 		this.getGroupList()
+		this.getPlList()
 		this.getTypeList()
 	},
 	methods: {
+		// destroy dialog
+		handleDestroyDialog() {
+			setTimeout(() => {
+				this.addOrUpdateVisible = false
+			}, /** after dialog animated */ 200)
+		},
+		// 获取产线列表，用于刷新工段列表
+		getPlList() {
+			this.$http({
+				url: this.$http.adornUrl('/monitoring/productionLine/list'),
+				method: 'get'
+			}).then(({ data: res }) => {
+				const plConfig = this.addOrUpdateConfigs.fields.find(item => item.name === 'lineId')
+				plConfig.options =
+					res.data?.map(item => ({
+						value: item.id,
+						label: item.name
+					})) || []
+			})
+		},
+		// 获取工段列表
+		getWsList(id) {
+			let params = {
+				page: 1,
+				limit: 999
+			}
+			if (id) {
+				params.lineId = id
+			}
+			this.$http({
+				url: this.$http.adornUrl('/monitoring/workshopSection/page'),
+				method: 'get',
+				params: this.$http.adornParams(params)
+			}).then(({ data: res }) => {
+				const wsConfig = this.addOrUpdateConfigs.fields.find(item => item.name === 'sectionId')
+				wsConfig.options =
+					res.data?.list?.map(item => ({
+						value: item.id,
+						label: item.name
+					})) || []
+			})
+		},
 		// 获取设备类型列表
 		getTypeList() {
 			this.$http({
@@ -343,6 +424,13 @@ export default {
 		selectionChangeHandle(val) {
 			this.dataListSelections = val
 		},
+		// 对话框里的某个选择改变了
+		handleDialogSelectChange({ name, id }) {
+			switch (name) {
+				case 'lineId':
+					this.getWsList(id)
+			}
+		},
 		handleOperations({ type, data: id }) {
 			switch (type) {
 				case 'view-detail':

src/views/modules/monitoring/equipmentAlarmLog.vue

@@ -1,16 +1,16 @@
 <template>
 	<div class="mod-config">
-		<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+		<el-form :inline="true" :model="dataForm" @keyup.enter.native="currentChangeHandle(1)">
 			<el-form-item>
 				<el-input v-model="dataForm.key" :placeholder="$t('parameter')" clearable></el-input>
 			</el-form-item>
 			<el-form-item>
-				<el-button @click="getDataList()">{{ $t('query') }}</el-button>
+				<el-button @click="currentChangeHandle(1)">{{ $t('query') }}</el-button>
 				<el-button v-if="$hasPermission('monitoring:equipmenalarmlog:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
 			</el-form-item>
 		</el-form>
 
-		<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" />
+		<base-table :page="pageIndex" :size="pageSize" :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" />
 		<el-pagination
 			@size-change="sizeChangeHandle"
 			@current-change="currentChangeHandle"
@@ -77,6 +77,12 @@ export default {
 		this.getDataList()
 	},
 	methods: {
+		// destroy dialog
+		handleDestroyDialog() {
+			setTimeout(() => {
+				this.addOrUpdateVisible= false
+			}, /** after dialog animated */ 200);
+		},
 		// 获取数据列表
 		getDataList() {
 			this.dataListLoading = true

src/views/modules/monitoring/equipmentCurrentState.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="mod-config">
-		<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+		<el-form :inline="true" :model="dataForm" @keyup.enter.native="currentChangeHandle(1)">
 			<el-form-item>
 				<el-select v-model="dataForm.lineId" :placeholder="'产线'" clearable>
 					<el-option v-for="line in lineList" :key="line.code" :value="line.id" :label="line.name" />
@@ -12,12 +12,12 @@
 				</el-select>
 			</el-form-item>
 			<el-form-item>
-				<el-button @click="getDataList()">{{ $t('query') }}</el-button>
+				<el-button @click="currentChangeHandle(1)">{{ $t('query') }}</el-button>
 				<!-- <el-button v-if="$hasPermission('monitoring:equipmentgroup:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button> -->
 			</el-form-item>
 		</el-form>
 
-		<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" @operate-event="handleOperations" @refreshDataList="getDataList" />
+		<base-table :page="pageIndex" :size="pageSize" :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" @operate-event="handleOperations" @refreshDataList="getDataList" />
 		<el-pagination
 			@size-change="sizeChangeHandle"
 			@current-change="currentChangeHandle"
@@ -29,7 +29,7 @@
 		>
 		</el-pagination>
 		<!-- 弹窗, 新增 / 修改 -->
-		<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" :configs="addOrUpdateConfigs" @refreshDataList="getDataList" @destory-dialog="addOrUpdateVisible = false" />
+		<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" :configs="addOrUpdateConfigs" @refreshDataList="getDataList" @destory-dialog="handleDestroyDialog" />
 	</div>
 </template>
 
@@ -75,7 +75,14 @@ const tableConfigs = [
 	},
 	{ prop: 'quantityTime', name: i18n.t('realtime.productionSnapshotTime'), filter: timeFilter },
 	{ prop: 'statusTime', name: i18n.t('realtime.statusSnapshotTime'), filter: timeFilter },
-	{ prop: 'alarm', name: i18n.t('realtime.recentParamValue'), buttonContent: i18n.t('realtime.view'), subcomponent: TableTextComponent, actionName: 'view-alarm' }
+	{
+		prop: 'alarm',
+		name: i18n.t('realtime.recentParamValue'),
+		buttonContent: i18n.t('realtime.view'),
+		subcomponent: TableTextComponent,
+		emitFullData: true,
+		actionName: 'view-alarm'
+	}
 	// { prop: 'operations', name: i18n.t('handle'), fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['edit', 'delete'] }
 ]
 
@@ -121,6 +128,12 @@ export default {
 		this.getDataList()
 	},
 	methods: {
+		// destroy dialog
+		handleDestroyDialog() {
+			setTimeout(() => {
+				this.addOrUpdateVisible= false
+			}, /** after dialog animated */ 200);
+		},
 		// 设备
 		getEqList() {
 			this.$http({
@@ -186,23 +199,19 @@ export default {
 		selectionChangeHandle(val) {
 			this.dataListSelections = val
 		},
-		handleOperations({ type, data: id }) {
+		handleOperations({ type, data }) {
 			switch (type) {
 				case 'view-alarm':
-					const { name, code } = this.dataList.find(item => item.id === id)
+					const { equipmentId: id } = data
 					this.$router.push({
-						name: 'monitoring-equipmentGroupAlarm',
-						params: {
-							groupName: name,
-							groupCode: code,
-							id
-						}
+						name: 'monitoring-equipmentHistoricalParameters',
+						params: { id }
 					})
 					break
-				case 'edit':
-					return this.addOrUpdateHandle(id)
-				case 'delete':
-					return this.deleteHandle(id)
+				// case 'edit':
+				// 	return this.addOrUpdateHandle(id)
+				// case 'delete':
+				// 	return this.deleteHandle(id)
 			}
 		},
 		// 新增 / 修改

src/views/modules/monitoring/equipmentEfficiency.vue

@@ -0,0 +1,375 @@
+<template>
+	<!-- 设备效率分析 -->
+	<div class="mod-config">
+		<el-form :inline="true" :model="dataForm" @keyup.enter.native="currentChangeHandle(1)">
+			<!-- 工厂 -->
+			<el-form-item>
+				<!-- <el-select v-model="dataForm.factoryId" :placeholder="$t('eq.name') + ' / ' + $t('eq.code')" clearable></el-select> -->
+				<el-select v-model="dataForm.ftId" :placeholder="$t('factory.title')" clearable>
+					<el-option v-for="factory in factoryList" :key="factory.id" :value="factory.id" :label="factory.name" />
+				</el-select>
+			</el-form-item>
+			<!-- 产线 -->
+			<el-form-item>
+				<el-select v-model="dataForm.productlines" :placeholder="$t('pl.title')" multiple clearable>
+					<el-option v-for="productLine in productLineList" :key="productLine.id" :value="productLine.id" :label="productLine.name" />
+				</el-select>
+			</el-form-item>
+			<!-- 时间类型 -->
+			<!-- 按时间段 -->
+			<el-form-item>
+				<el-select v-model="timeType" :placeholder="$t('timetype')" clearable>
+					<el-option value="range" :label="$t('reftimerange')" />
+					<el-option value="date" :label="$t('refdate')" />
+				</el-select>
+			</el-form-item>
+			<!-- 日期选择 -->
+			<el-form-item v-if="timeType === 'date'">
+				<el-date-picker key="range-picker" v-model="rawTime" type="date" :placeholder="$t('hints.date')" format="yyyy-MM-dd" />
+			</el-form-item>
+			<!-- 时间段选择 -->
+			<el-form-item v-else>
+				<el-date-picker
+					key="time-picker"
+					v-model="rawTime"
+					type="daterange"
+					:range-separator="$t('datePicker.range')"
+					:start-placeholder="$t('datePicker.starttime')"
+					:end-placeholder="$t('datePicker.endtime')"
+					format="yyyy-MM-dd"
+				/>
+			</el-form-item>
+			<!-- 按钮 -->
+			<el-form-item>
+				<el-button @click="currentChangeHandle(1)">{{ $t('search') }}</el-button>
+				<!-- <el-button v-if="$hasPermission('monitoring:equipmentEffiency:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button> -->
+			</el-form-item>
+		</el-form>
+
+		<transition mode="out-in" name="slide-to-left">
+			<equipment-efficiency-graph v-if="showGraph" key="graph" ref="eegraph" @close-graph="showGraph = false" />
+			<base-table v-else :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)"
+				@operate-event="handleOperations" @refreshDataList="getDataList" />
+			<!-- v-loading="dataIsLoading " -->
+		</transition>
+		<!-- <el-pagination
+			@size-change="sizeChangeHandle"
+			@current-change="currentChangeHandle"
+			:current-page="pageIndex"
+			:page-sizes="[10, 20, 50, 100]"
+			:page-size="pageSize"
+			:total="totalPage"
+			layout="total, sizes, prev, pager, next, jumper"
+		></el-pagination> -->
+	</div>
+</template>
+
+<script>
+import i18n from '@/i18n'
+import BaseTable from '@/components/base-table'
+// import TableOperateComponent from '@/components/base-table/components/operationComponent'
+import TableTextComponent from '@/components/base-table/components/detailComponent'
+import EquipmentEfficiencyGraph from './equipmentEfficiencyGraph.vue'
+import { calcMaxHeight } from '@/utils'
+// import { timeFilter } from '@/utils/filters'
+import moment from 'moment'
+
+const tableConfigs = [
+	{
+		type: 'index',
+		name: i18n.t('index')
+	},
+	{
+		// name: i18n.t('createTime'),
+		prop: 'factoryName',
+		name: i18n.t('factory.title')
+	},
+	{ prop: 'pdName', name: i18n.t('pl.title') },
+	{ prop: 'wsName', name: i18n.t('ws.title') },
+	{ prop: 'eqName', name: i18n.t('eq.title') },
+	{
+		name: i18n.t('eq.efficienttimeh'),
+		children: [
+			{ prop: 'workTime', name: i18n.t('eq.worktimeh'), width: 120, filter: val => `${val} `+i18n.t('hour') },
+			{ prop: 'workRate', name: i18n.t('eq.workdurationratio'), width: 120, filter: val => (val * 100).toFixed(2) + '%' }
+		]
+	},
+	{
+		name: i18n.t('eq.shutdowntimeh'),
+		children: [
+			{ prop: 'stopTime', name: i18n.t('eq.stoptimeh'), width: 120, filter: val => `${val} `+i18n.t('hour') },
+			{ prop: 'stopRate', name: i18n.t('eq.stopratio'), width: 120, filter: val => (val * 100).toFixed(2) + '%' }
+		]
+	},
+	{
+		name: i18n.t('eq.stoplost'),
+		children: [
+			{ prop: 'downTime', name: i18n.t('eq.downtimeh'), width: 120, filter: val => `${val} `+i18n.t('hour') },
+			{ prop: 'downRate', name: i18n.t('eq.downrate'), width: 120, filter: val => (val * 100).toFixed(2) + '%' },
+			{ prop: 'timeEfficiency', name: i18n.t('eq.timeefficiency'), width: 120, filter: val => (val * 100).toFixed(2) + '%' }
+		]
+	},
+	{
+		name: i18n.t('eq.speedlost'),
+		children: [
+			{ prop: 'realYield', name: i18n.t('eq.realyield'), width: 120, filter: val => `${val} `+i18n.t('hour') },
+			{ prop: 'designYield', name: i18n.t('eq.designyield'), width: 120, filter: val => `${val} `+i18n.t('hour') },
+			{ prop: 'peEfficiency', name: i18n.t('eq.speedefficiency'), width: 120, filter: val => (val * 100).toFixed(2) + '%' }
+		]
+	},
+	{
+		name: 'OEE',
+		prop: 'oee',
+		filter: val => (val * 100).toFixed(2) + '%'
+	},
+	{
+		name: 'TEEP',
+		prop: 'teep',
+		filter: val => (val * 100).toFixed(2) + '%'
+	},
+	{
+		prop: 'operations',
+		name: i18n.t('handle'),
+		fixed: 'right',
+		width: 120,
+		subcomponent: TableTextComponent,
+		// options: ['edit', 'delete']
+		// options: ['view-trend'] // 查看趋势
+		buttonContent: i18n.t('eq.viewtrend'),
+		actionName: 'view-trend',
+		emitFullData: true
+	}
+]
+
+export default {
+	data() {
+		return {
+			/** hfxny part */
+			factoryList: [],
+			productLineList: [],
+			showGraph: false,
+			/** */
+			calcMaxHeight,
+			tableConfigs,
+			timeType: 'date',
+			rawTime: null, // [] or datetime
+			dataForm: {
+				type: 1,
+				ftId: null,
+				productlines: [],
+				startTime: null,
+				entTime: null
+			},
+			dataList: [],
+			pageIndex: 1,
+			pageSize: 10,
+			totalPage: 0,
+			dataListLoading: false
+		}
+	},
+	components: {
+		BaseTable,
+		EquipmentEfficiencyGraph
+	},
+
+	activated() {
+		this.getFactoryList().then(() => {
+			this.getProductLineList()
+		})
+	},
+	watch: {
+		timeType() {
+			// 防止切换日期类型时报错
+			this.rawTime = null
+		}
+	},
+	methods: {
+		// 获取工厂列表
+		getFactoryList() {
+			return this.$http({
+				url: this.$http.adornUrl('/monitoring/factory/list'),
+				method: 'get'
+			}).then(({ data: res }) => {
+				if (res && res.code === 0) {
+					this.factoryList = res.data
+					/** set default */
+					if (this.factoryList.length) {
+						this.dataForm.ftId = this.factoryList[0].id
+					}
+				} else {
+					this.factoryList = []
+					this.dataForm.ftId = null
+				}
+			})
+		},
+
+		// 选择工厂时
+		handleFactoryChange(val) {
+			this.getProductLineList()
+		},
+
+		// 获取产线列表
+		getProductLineList() {
+			const query = {
+				url: this.$http.adornUrl('/monitoring/productionLine/list'),
+				method: 'get'
+			}
+			if (this.dataForm.ftId) {
+				query.params = this.$http.adornParams({
+					factoryId: this.dataForm.ftId
+				});
+			}
+			this.$http(query).then(({ data: res }) => {
+				if (res && res.code === 0 && res.data.length) {
+					this.productLineList = res.data
+					/** set default */
+					this.dataForm.productlines = [this.productLineList[0].id]
+				} else {
+					this.productLineList = []
+					this.dataForm.productlines = []
+				}
+			})
+		},
+
+		// 时间类型预处理
+		getTimeRange() {
+			let startTime
+			let endTime
+			if (this.rawTime instanceof Array) {
+				startTime = this.rawTime[0] ? moment(this.rawTime[0]).format('YYYY-MM-DDTHH:mm:ss') : '' // 强制axios使用北京时间
+				endTime = this.rawTime[1] ? moment(this.rawTime[1]).format('YYYY-MM-DDTHH:mm:ss') : ''
+			} else {
+				if (this.rawTime) {
+					startTime = moment(this.rawTime).format('YYYY-MM-DDTHH:mm:ss')
+					endTime = moment(startTime)
+						.add(1, 'd')
+						.format('YYYY-MM-DDTHH:mm:ss')
+				} else {
+					startTime = ''
+					endTime = ''
+				}
+			}
+			return { startTime, endTime }
+		},
+
+		// 获取数据列表
+		getDataList() {
+			const { startTime, endTime } = this.getTimeRange()
+			this.showGraph = false
+			// this.dataListLoading = true
+			this.$http({
+				url: this.$http.adornUrl('/monitoring/eqAnalysis/oee'),
+				method: 'post',
+				data: {
+					startTime,
+					endTime,
+					ftId: this.dataForm.ftId,
+					productlines: this.dataForm.productlines,
+					// limit: this.pageIndex,
+					// page: this.pageSize,
+					type: 1
+				}
+			}).then(({ data: res }) => {
+				if (res.data && res.code !== 500) {
+					console.log('oee data:', res)
+					if (res.data.length) {
+						this.dataList = res.data
+						// this.dataList = Array(20).fill(1)
+					} else {
+						this.dataList.splice(0)
+					}
+				} else {
+					this.dataList.splice(0)
+					this.$message.error(res.msg)
+				}
+			})
+		},
+
+		// 查看趋势
+		viewTrend(data) {
+			const { startTime, endTime } = this.getTimeRange()
+			const injectData = {
+				// 时间段
+				startTime,
+				endTime,
+				// 设备id
+				equipmentId: data.eqId,
+				equipmentName: data.eqName,
+				// 时间类型, type 按年，按月，按日等
+				type: 1, // 默认 type 1, 1无间隔；2按月分隔；3按周分隔；4按天分隔
+				// 时长数据: 工作时长， 停机时长，故障时长
+				workTime: data.workTime,
+				stopTime: data.stopTime,
+				downTime: data.downTime,
+				// 比例数据: 工作时长比率，停机时长比率，故障时长比率，速度开动率，OEE，TEEP
+				workRate: data.workRate,
+				stopRate: data.stopRate,
+				downRate: data.downRate,
+				peEfficiency: data.peEfficiency,
+				timeEfficiency: data.timeEfficiency
+			}
+			// console.log('trends data: ', data)
+
+			this.showGraph = true
+
+			console.clear()
+			console.log('inject data: ', injectData)
+
+			setTimeout(() => {
+				// console.log('befoer graph: ', this.$refs.eegraph)
+				this.$refs.eegraph.init(injectData) // 注入初始数据，这些数据在组件内部用作条件，有可能会被更改
+			}, 600) // 动画是500ms
+		},
+
+		// 每页数
+		sizeChangeHandle(val) {
+			this.pageSize = val
+			this.pageIndex = 1
+			this.getDataList()
+		},
+		// 当前页
+		currentChangeHandle(val) {
+			this.pageIndex = val
+			this.getDataList()
+		},
+		// 多选
+		selectionChangeHandle(val) {
+			this.dataListSelections = val
+		},
+
+		handleOperations({ type, data }) {
+			switch (type) {
+				case 'view-trend':
+					return this.viewTrend(data)
+				// return this.addOrUpdateHandle(id, true)
+				// case 'edit':
+				// 	return this.addOrUpdateHandle(id)
+				// case 'delete':
+				// 	return this.deleteHandle(id)
+			}
+		}
+	}
+}
+</script>
+
+<style scoped>
+.slide-to-left-enter-active,
+.slide-to-left-leave-active {
+	transition: all 0.5s;
+}
+
+.slide-to-left-enter {
+	transform: translateX(10px);
+	opacity: 0;
+}
+
+.slide-to-left-leave-to {
+	transform: translateX(-10px);
+	opacity: 0;
+}
+
+.slide-to-left-leave,
+.slide-to-left-enter-to {
+	transform: translateX(0);
+}
+</style>

src/views/modules/monitoring/equipmentEfficiencyGraph.vue

@@ -0,0 +1,330 @@
+<!--
+/*
+* @Author: lb
+* @Date: 2022-07-24 13:30:00
+* @LastEditTime: 2022-07-28 09:30:00
+* @LastEditors: lb
+* @Description: 设备效率分析-echarts图
+*/
+-->
+<template>
+	<div class="graph-area">
+		<span class="close-btn" @click="close">
+			<svg xmlns="http://www.w3.org/2000/svg" style="height: 100%; width: 100%;" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+				<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+			</svg>
+		</span>
+
+		<div class="close-row">
+			<el-radio-group v-model="dataType" class="head-radio-group" size="small" @change="setLegend">
+				<el-radio-button :label="$t('eq.ratio')" />
+				<el-radio-button :label="$t('eq.time')" />
+			</el-radio-group>
+
+			<el-radio-group v-if="1" v-model="searchType" class="head-radio-group" style="margin-left: 8px;" size="small" @change="handleRadioGroupChanged">
+				<el-radio-button v-for="(opt, index) in searchRadioOptions" :key="index" :label="opt" />
+			</el-radio-group>
+		</div>
+
+		<div id="trend-graph" class="real-graph" style="width: 100%; height: 500px;" />
+	</div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import moment from 'moment'
+import { pick } from 'lodash/object'
+import i18n from '../../../i18n'
+
+class EchartConfigs {
+	constructor() {
+		this.color = ['#e91e63', '#4caf50', '#3f51b5', '#ffc107', '#607d8b']
+		this.title = {
+			text: i18n.t('eq.timetrend'),
+			top: 0,
+			left: 'center',
+			textStyle: {
+				fontWeight: 'bold',
+				fontSize: 18,
+				lineHeight: 18
+			}
+		}
+		this.tooltip = {
+			trigger: 'axis',
+			// 将axisPointer设置得更显眼一点
+			axisPointer: {
+				type: 'shadow'
+			}
+		}
+		// legend
+		this.legend = {
+			icon: 'circle',
+			top: 24,
+			left: 'center',
+			padding: 8,
+			itemGap: 8,
+			data: [] // 动态设置
+		}
+		this.xAxis = {
+			type: 'category',
+			data: [] // 动态设置
+			// https://tushuo.baidu.com/wave/index#/manufacture/dta9pydmexfdhc0sg/999
+		}
+		this.yAxis = {
+			type: 'value'
+		}
+		this.series = [] // 动态设置
+	}
+
+	setTitle(val) {
+		this.title.text = val
+	}
+
+	setLegend(val) {
+		this.legend.data.splice(0)
+		if (Array.isArray(val)) {
+			this.legend.data = val
+		} else {
+			console.error('setLegend() 只接受数组参数')
+		}
+	}
+
+	setXAxis(val) {
+		// console.log('in setXAxis(): ', val)
+		this.xAxis.data.splice(0)
+		if (Array.isArray(val)) {
+			this.xAxis.data = val
+		} else {
+			console.error('setXAxis() 只接受数组参数')
+		}
+	}
+
+	setSeries(val) {
+		this.series.splice(0)
+		if (Array.isArray(val) && this.series.length === 0) {
+			this.series = val
+		} else {
+			console.error('setSeries() 只接受数组参数')
+		}
+	}
+}
+
+export default {
+	name: 'EquipmentEfficiencyGraph',
+	props: {},
+	data() {
+		return {
+			searchType: i18n.t('eq.nogap'),
+			searchRadioOptions: [i18n.t('eq.nogap'), i18n.t('eq.monthgap'), i18n.t('eq.weekgap'), i18n.t('eq.daygap')],
+			dataType: i18n.t('eq.time'),
+			dataRadioOptions: [i18n.t('eq.time'), i18n.t('eq.ratio')],
+			config: new EchartConfigs(),
+			chart: null,
+			rateList: [], // 对请求来的数据分流
+			timeList: [],
+			xAxis: [], // 动态设置
+			injectData: null
+		}
+	},
+	methods: {
+		async initChart() {
+			this.config.setTitle(this.injectData.equipmentName + i18n.t('eq.timetrend'))
+			await this.getList()
+			this.setLegend()
+		},
+
+		init(data) {
+			this.injectData = data
+			if (!this.chart) {
+				this.chart = echarts.init(document.getElementById('trend-graph'))
+				// this.chart.setOption(this.config)
+				this.initChart()
+			}
+		},
+		close() {
+			this.$emit('close-graph')
+		},
+
+		makeQuerys() {
+			const searchTypeMap = {
+				[i18n.t('eq.nogap')]: 1,
+				[i18n.t('eq.monthgap')]: 2,
+				[i18n.t('eq.weekgap')]: 3,
+				[i18n.t('eq.daygap')]: 4,
+				[i18n.t('eq.hourgap')]: 5
+			}
+
+			return {
+				type: searchTypeMap[this.searchType],
+				eqId: this.injectData.equipmentId,
+				startTime: this.injectData.startTime, // '2022-06-14T00:00:00'
+				endTime: this.injectData.endTime
+			}
+		},
+
+		// getOEE
+		getOEE(params) {
+			return this.$http({
+				url: this.$http.adornUrl('/monitoring/eqAnalysis/oee'),
+				method: 'post',
+				data: params
+			}).then(({ data: res }) => {
+				if (!res.data || res.code === 500) {
+					this.dataList.splice(0)
+					this.$message.error(res.msg)
+					return { data: null }
+				}
+				return res.data
+			})
+		},
+
+		getList() {
+			const params = this.makeQuerys()
+			// 发起请求
+			return this.getOEE(params).then(datalist => {
+				console.log('getOEE res:', datalist)
+				this.timeList.splice(0)
+				this.rateList.splice(0)
+				this.xAxis.splice(0)
+				if (datalist.length) {
+					// 分流
+					datalist.map(item => {
+						const time = moment(item.time)
+						if (this.searchType === i18n.t('eq.monthgap')) {
+							this.xAxis.push(`${time.year()}${i18n.t('eq.year')}${time.month() + 1}${i18n.t('eq.month')}`)
+						} else if (this.searchType === i18n.t('eq.weekgap')) {
+							this.xAxis.push(`${time.format('YYYY-MM-DD')}`)
+						} else if (this.searchType === i18n.t('eq.daygap')) {
+							this.xAxis.push(`${time.format('YY-M-D')}`)
+						} else {
+							this.xAxis.push(`${time.format('YYYY-MM-DD')}`)
+						}
+						this.timeList.push(pick(item, ['workTime', 'stopTime', 'downTime']))
+						this.rateList.push(pick(item, ['workRate', 'stopRate', 'downRate', 'peEfficiency', 'timeEfficiency', 'oee', 'teep']))
+					})
+
+					// 设置横轴
+					this.config.setXAxis(JSON.parse(JSON.stringify(this.xAxis)))
+				}
+			})
+		},
+
+		async handleRadioGroupChanged() {
+			// 获取数据且设置横轴
+			await this.getList()
+			// 设置legend和数据
+			this.setLegend()
+		},
+
+		setLegend() {
+			// 设置legend
+			const legendMap = {
+				[i18n.t('eq.ratio')]: [
+					i18n.t('eq.workdurationratio'),
+					i18n.t('eq.stopdurationratio'),
+					i18n.t('eq.downdurationratio'),
+					i18n.t('eq.speedefficiency'),
+					i18n.t('eq.timeefficiency'),
+					'OEE',
+					'TEEP'
+				],
+				[i18n.t('eq.time')]: [i18n.t('eq.worktime'), i18n.t('eq.stoptime'), i18n.t('eq.downtime')]
+			}
+			this.config.setLegend(legendMap[this.dataType])
+			this.setData()
+			// 重新绘制
+			this.renderGraph()
+		},
+
+		setData() {
+			if (this.dataType === i18n.t('eq.time')) {
+				const workTimeList = []
+				const stopTimeList = []
+				const downTimeList = []
+				this.timeList.map(item => {
+					workTimeList.push(item.workTime)
+					stopTimeList.push(item.stopTime)
+					downTimeList.push(item.downTime)
+				})
+				this.config.setSeries([
+					{ name: i18n.t('eq.worktime'), type: 'bar', data: workTimeList },
+					{ name: i18n.t('eq.stoptime'), type: 'bar', data: stopTimeList },
+					{ name: i18n.t('eq.downtime'), type: 'bar', data: downTimeList }
+				])
+			} else {
+				// 百分比
+				const workRateList = []
+				const stopRateList = []
+				const downRateList = []
+				const peEfficiencyList = []
+				const timeEfficiencyList = []
+				const oeeList = []
+				const teepList = []
+				this.rateList.map(item => {
+					workRateList.push(item.workRate)
+					stopRateList.push(item.stopRate)
+					downRateList.push(item.downRate)
+					peEfficiencyList.push(item.peEfficiency)
+					timeEfficiencyList.push(item.timeEfficiency)
+					oeeList.push(item.oee)
+					teepList.push(item.teep)
+				})
+				this.config.setSeries([
+					{ name: i18n.t('eq.workdurationratio'), type: 'bar', data: workRateList },
+					{ name: i18n.t('eq.stopdurationratio'), type: 'bar', data: stopRateList },
+					{ name: i18n.t('eq.downdurationratio'), type: 'bar', data: downRateList },
+					{ name: i18n.t('eq.speedefficiency'), type: 'bar', data: peEfficiencyList },
+					{ name: i18n.t('eq.timeefficiency'), type: 'bar', data: timeEfficiencyList },
+					{ name: 'OEE', type: 'bar', data: oeeList },
+					{ name: 'TEEP', type: 'bar', data: teepList }
+				])
+			}
+		},
+
+		// 重新绘制图形
+		renderGraph() {
+			console.log('latest config: ', JSON.stringify(this.config))
+			this.$nextTick(() => {
+				// this.chart.setOption(this.config)
+				this.chart.setOption(this.config, {
+					notMerge: true
+				})
+			})
+		}
+	}
+}
+</script>
+
+<style scoped>
+.graph-area {
+	width: 100%;
+	min-height: 200px;
+	position: relative;
+}
+
+.close-row {
+	position: relative;
+	padding: 8px 0;
+}
+
+.close-btn {
+	position: absolute;
+	z-index: 1;
+	top: 10px;
+	right: 10px;
+	display: inline-block;
+	width: 20px;
+	height: 20px;
+	cursor: pointer;
+	transition: color 0.3s linear;
+}
+
+.close-btn:hover {
+	color: #409eff;
+}
+
+.head-radio-group >>> .el-radio-button__orig-radio:checked + .el-radio-button__inner {
+	background-color: #409eff;
+	border-color: #409eff;
+}
+</style>

src/views/modules/monitoring/equipmentException.vue

@@ -0,0 +1,204 @@
+<template>
+	<!-- 设备效率分析 -->
+	<div class="mod-config">
+		<el-form :inline="true" :model="dataForm" @keyup.enter.native="currentChangeHandle(1)">
+			<!-- 月份 -->
+			<el-form-item>
+				<el-date-picker key="month-picker" v-model="rawTime" type="month" :placeholder="$t('prompt.month')" format="yyyy-MM" />
+			</el-form-item>
+			<!-- 产线 -->
+			<el-form-item>
+				<el-select v-model="dataForm.productlines" :placeholder="$t('pl.title')" multiple clearable>
+					<el-option v-for="productLine in productLineList" :key="productLine.id" :value="productLine.id" :label="productLine.name" />
+				</el-select>
+			</el-form-item>
+
+			<!-- 按钮 -->
+			<el-form-item>
+				<el-button @click="currentChangeHandle(1)">{{ $t('search') }}</el-button>
+				<!-- <el-button v-if="$hasPermission('monitoring:equipmentEffiency:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button> -->
+			</el-form-item>
+		</el-form>
+
+		<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" @operate-event="handleOperations" @refreshDataList="getDataList" />
+
+		<!-- <el-pagination
+			@size-change="sizeChangeHandle"
+			@current-change="currentChangeHandle"
+			:current-page="pageIndex"
+			:page-sizes="[10, 20, 50, 100]"
+			:page-size="pageSize"
+			:total="totalPage"
+			layout="total, sizes, prev, pager, next, jumper"
+		/> -->
+	</div>
+</template>
+
+<script>
+import i18n from '@/i18n'
+import BaseTable from '@/components/base-table'
+// import TableOperateComponent from '@/components/base-table/components/operationComponent'
+import TableTextComponent from '@/components/base-table/components/detailComponent'
+import { timeFilter } from '@/utils/filters'
+import { calcMaxHeight } from '@/utils'
+import moment from 'moment'
+
+const tableConfigs = [
+	{
+		type: 'index',
+		name: i18n.t('index')
+	},
+	// { prop: 'time', name: '时间', filter: timeFilter },
+	{ prop: 'pdName', name: i18n.t('pl.name') },
+	{ prop: 'wsName', name: i18n.t('ws.title') },
+	{ prop: 'eqName', name: i18n.t('eq.title') },
+	{ prop: 'mtbf', name: i18n.t('eq.mtbf'), width: 220 },
+	{ prop: 'mttr', name: i18n.t('eq.mttr'), width: 190 },
+	{ prop: 'workTime', name: i18n.t('eq.worktimeh') },
+	{ prop: 'downTime', name: i18n.t('eq.downtimeh') },
+	{ prop: 'downCount', name: i18n.t('eq.downcount') }
+	// {
+	// 	prop: 'operations',
+	// 	name: i18n.t('handle'),
+	// 	fixed: 'right',
+	// 	width: 120,
+	// 	subcomponent: TableTextComponent,
+	// 	buttonContent: '查看详情', // 会转到“设备报警”
+	// 	emitFullData: true
+	// }
+]
+
+export default {
+	data() {
+		return {
+			/** hfxny part */
+			factoryList: [],
+			productLineList: [],
+			/** */
+			calcMaxHeight,
+			tableConfigs,
+			timeType: 'range',
+			rawTime: new Date(),
+			dataForm: {
+				type: 1,
+				productlines: [],
+				startTime: null,
+				entTime: null
+			},
+			dataList: [],
+			pageIndex: 1,
+			pageSize: 10,
+			totalPage: 0,
+			dataListLoading: false
+		}
+	},
+	components: {
+		BaseTable
+	},
+
+	activated() {
+		// this.getFactoryList()
+		this.getProductLineList()
+	},
+	watch: {},
+	methods: {
+		// 获取工厂列表
+		// getFactoryList() {
+		// 	this.$http({
+		// 		url: this.$http.adornUrl('/monitoring/factory/page'),
+		// 		method: 'get'
+		// 	}).then(({ data }) => {
+		// 		if (data && data.code === 0) {
+		// 			this.factoryList = data.data.list
+		// 			/** set default */
+		// 			if (this.factoryList.length) {
+		// 				this.dataForm.ftId = this.factoryList[0].id
+		// 			}
+		// 		} else {
+		// 			this.factoryList = []
+		// 			this.dataForm.ftId = null
+		// 		}
+		// 	})
+		// },
+		// 获取产线列表
+		getProductLineList() {
+			this.$http({
+				url: this.$http.adornUrl('/monitoring/productionLine/list'),
+				method: 'get'
+			}).then(({ data: res }) => {
+				if (res && res.code === 0) {
+					this.productLineList = res.data
+					/** set default */
+					if (this.productLineList.length) {
+						this.dataForm.productlines = [this.productLineList[0].id]
+					}
+				} else {
+					this.productLineList = []
+					this.dataForm.productlines = []
+				}
+			})
+		},
+
+		// 获取数据列表
+		getDataList() {
+			// this.dataList = Array(10).fill(1)
+			// return
+			let startTime = this.rawTime
+				? moment(this.rawTime)
+						.set({ date: 1, hour: 0, minute: 0, second: 0, millisecond: 0 })
+						.format('YYYY-MM-DDTHH:mm:ss')
+				: ''
+			let endTime = startTime
+				? moment(startTime)
+						.add(1, 'M')
+						.format('YYYY-MM-DDTHH:mm:ss')
+				: ''
+
+			this.dataListLoading = true
+
+			this.$http({
+				url: this.$http.adornUrl('/monitoring/eqAnalysis/mtbrAndMtbr'),
+				method: 'post',
+				data: {
+					startTime,
+					endTime,
+					productlines: this.dataForm.productlines,
+					type: 1
+				}
+			}).then(({ data: res }) => {
+				if (res.code === 500) {
+					this.dataList.splice(0)
+					this.$message.error(res.msg)
+				} else {
+					this.dataList = res.data
+				}
+			})
+		},
+		// 每页数
+		sizeChangeHandle(val) {
+			this.pageSize = val
+			this.pageIndex = 1
+			this.getDataList()
+		},
+		// 当前页
+		currentChangeHandle(val) {
+			this.pageIndex = val
+			this.getDataList()
+		},
+		// 多选
+		selectionChangeHandle(val) {
+			this.dataListSelections = val
+		},
+		handleOperations({ type, data: id }) {
+			switch (type) {
+				case 'view-detail':
+					return this.addOrUpdateHandle(id, true)
+				case 'edit':
+					return this.addOrUpdateHandle(id)
+				case 'delete':
+					return this.deleteHandle(id)
+			}
+		}
+	}
+}
+</script>

src/views/modules/monitoring/equipmentFile.vue

@@ -1,11 +1,11 @@
 <template>
 	<div class="mod-config">
-		<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+		<el-form :inline="true" :model="dataForm" @keyup.enter.native="currentChangeHandle(1)">
 			<el-form-item>
 				<el-input v-model="dataForm.key" :placeholder="$t('parameter')" clearable></el-input>
 			</el-form-item>
 			<el-form-item>
-				<el-button @click="getDataList()">{{ $t('query') }}</el-button>
+				<el-button @click="currentChangeHandle(1)">{{ $t('query') }}</el-button>
 				<el-button v-if="$hasPermission('monitoring:equipmenfile:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
 			</el-form-item>
 		</el-form>
@@ -80,6 +80,12 @@ export default {
 		this.getDataList()
 	},
 	methods: {
+		// destroy dialog
+		handleDestroyDialog() {
+			setTimeout(() => {
+				this.addOrUpdateVisible= false
+			}, /** after dialog animated */ 200);
+		},
 		// 获取数据列表
 		getDataList() {
 			this.dataListLoading = true

src/views/modules/monitoring/equipmentGroup.vue

@@ -1,16 +1,24 @@
 <template>
 	<div class="mod-config">
-		<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+		<el-form :inline="true" :model="dataForm" @keyup.enter.native="currentChangeHandle(1)">
 			<el-form-item>
 				<el-input v-model="dataForm.key" :placeholder="$t('eq.groupname') + ' / ' + $t('eq.groupcode')" clearable></el-input>
 			</el-form-item>
 			<el-form-item>
-				<el-button @click="getDataList()">{{ $t('query') }}</el-button>
+				<el-button @click="currentChangeHandle(1)">{{ $t('query') }}</el-button>
 				<el-button v-if="$hasPermission('monitoring:equipmentgroup:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
 			</el-form-item>
 		</el-form>
 
-		<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" @operate-event="handleOperations" @refreshDataList="getDataList" />
+		<base-table
+			:page="pageIndex"
+			:size="pageSize"
+			:data="dataList"
+			:table-head-configs="tableConfigs"
+			:max-height="calcMaxHeight(8)"
+			@operate-event="handleOperations"
+			@refreshDataList="getDataList"
+		/>
 		<el-pagination
 			@size-change="sizeChangeHandle"
 			@current-change="currentChangeHandle"
@@ -22,7 +30,7 @@
 		>
 		</el-pagination>
 		<!-- 弹窗, 新增 / 修改 -->
-		<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" :configs="addOrUpdateConfigs" @refreshDataList="getDataList" @destory-dialog="addOrUpdateVisible = false" />
+		<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" :configs="addOrUpdateConfigs" @refreshDataList="getDataList" @destory-dialog="handleDestroyDialog" />
 	</div>
 </template>
 
@@ -52,7 +60,7 @@ const tableConfigs = [
 const addOrUpdateConfigs = {
 	type: 'dialog',
 	infoUrl: '/monitoring/equipmentGroup',
-	fields: [{ name: 'name', label: i18n.t('eq.groupname') }, { name: 'code', label: i18n.t('eq.groupcode') }, 'remark'],
+	fields: [{ name: 'name', required: true, label: i18n.t('eq.groupname') }, { name: 'code', required: true, label: i18n.t('eq.groupcode') }, 'remark'],
 	operations: [
 		{ name: 'cancel', showAlways: true },
 		{ name: 'save', url: '/monitoring/equipmentGroup', permission: 'monitoring:equipmentgroup:save', showOnEdit: false },
@@ -86,6 +94,12 @@ export default {
 		this.getDataList()
 	},
 	methods: {
+		// destroy dialog
+		handleDestroyDialog() {
+			setTimeout(() => {
+				this.addOrUpdateVisible = false
+			}, /** after dialog animated */ 200)
+		},
 		// 获取数据列表
 		getDataList() {
 			this.addOrUpdateVisible = false

src/views/modules/monitoring/equipmentGroupAlarm.vue

@@ -1,27 +1,39 @@
 <template>
 	<div class="mod-config">
-		<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+		<el-form :inline="true" :model="dataForm">
 			<el-form-item :label="$t('eq.groupname')">
-				<strong>{{ $route.params.groupName }}</strong></el-form-item
+				<strong>{{ $route.params.groupName || '--' }}</strong></el-form-item
 			>
 
 			<el-form-item :label="$t('eq.groupcode')">
-				<strong>{{ $route.params.groupCode }}</strong>
+				<strong>{{ $route.params.groupCode || '--' }}</strong>
 			</el-form-item>
 			<!-- <el-form-item>
 				<el-input v-model="dataForm.key" :placeholder="$t('parameter')" clearable></el-input>
 			</el-form-item> -->
 			<br />
 			<el-form-item>
-				<!-- <el-button @click="getDataList()">{{ $t('query') }}</el-button> -->
-				<el-button v-if="$hasPermission('monitoring:equipmentgroupalarm:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
+				<!-- 报警编码/内容检索 -->
+				<el-input :placeholder="$t('alarm.code') + '/' + $t('alarm.content')" v-model="dataForm.key" clearable />
+			</el-form-item>
+			<el-form-item>
+				<el-button @click="currentChangeHandle(1)">{{ $t('query') }}</el-button>
+				<el-button v-if="$route.params.id && $hasPermission('monitoring:equipmentgroupalarm:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
 				<!-- <el-button v-if="$hasPermission('monitoring:equipmentgroupalarm:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">
 					批量删除
 				</el-button> -->
 			</el-form-item>
 		</el-form>
 
-		<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" @operate-event="handleOperations" @refreshDataList="getDataList" />
+		<base-table
+			:page="pageIndex"
+			:size="pageSize"
+			:data="dataList"
+			:table-head-configs="tableConfigs"
+			:max-height="calcMaxHeight(8)"
+			@operate-event="handleOperations"
+			@refreshDataList="getDataList"
+		/>
 		<el-pagination
 			@size-change="sizeChangeHandle"
 			@current-change="currentChangeHandle"
@@ -32,13 +44,13 @@
 			layout="total, sizes, prev, pager, next, jumper"
 		></el-pagination>
 		<!-- 弹窗, 新增 / 修改 -->
-		<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" :configs="addOrUpdateConfigs" @refreshDataList="getDataList" @destory-dialog="addOrUpdateVisible = false" />
+		<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" :configs="addOrUpdateConfigs" @refreshDataList="getDataList" @destory-dialog="handleDestroyDialog" />
 	</div>
 </template>
 
 <script>
 import { calcMaxHeight } from '@/utils'
-import { timeFilter } from '@/utils/filters'
+import { timeFilter, dictFilter } from '@/utils/filters'
 // import AddOrUpdate from './equipmentGroupAlarm-add-or-update'
 import AddOrUpdate from '@/components/base-dialog/addOrUpdate'
 import i18n from '@/i18n'
@@ -61,9 +73,12 @@ const tableConfigs = [
 	},
 	{ prop: 'createTime', name: i18n.t('createTime'), filter: timeFilter },
 	{ prop: 'code', name: i18n.t('alarm.code') },
-	{ prop: 'typeDictValue', name: i18n.t('alarm.type') },
-	{ prop: 'gradeDictValue', name: i18n.t('alarm.level') },
+	{ prop: 'typeDictValue', name: i18n.t('alarm.type'), filter: dictFilter(dictEntries.alarmType.value) },
+	{ prop: 'gradeDictValue', name: i18n.t('alarm.level'), filter: dictFilter(dictEntries.alarmLevel.value) },
 	{ prop: 'alarmContent', name: i18n.t('alarm.content') },
+	// { prop: 'externalCode', name: i18n.t('alarm.externalCode') },
+	{ prop: 'description', name: i18n.t('alarm.description') },
+	{ prop: 'remark', name: i18n.t('alarm.remark') },
 	{ prop: 'operations', name: i18n.t('handle'), fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['edit', 'delete'] }
 ]
 
@@ -71,10 +86,13 @@ const addOrUpdateConfigs = {
 	type: 'dialog',
 	infoUrl: '/monitoring/equipmentGroupAlarm',
 	fields: [
-		{ name: 'code', label: i18n.t('alarm.code'), required: true },
+		{ name: 'code', label: i18n.t('alarm.code'), api: '/monitoring/equipmentGroupAlarm/getCode', required: true },
 		{ name: 'typeDictValue', label: i18n.t('alarm.type'), type: 'select', options: [] },
 		{ name: 'gradeDictValue', label: i18n.t('alarm.level'), type: 'select', options: [] },
-		{ name: 'alarmContent', label: i18n.t('alarm.content'), required: true }
+		{ name: 'alarmContent', label: i18n.t('alarm.content'), required: true },
+		{ name: 'description', label: i18n.t('alarm.description') },
+		{ name: 'remark', label: i18n.t('alarm.remark') }
+		// { name: 'externalCode', label: i18n.t('alarm.externalCode') }
 	],
 	operations: [
 		{ name: 'cancel', showAlways: true },
@@ -111,6 +129,12 @@ export default {
 		this.getDataList()
 	},
 	methods: {
+		// destroy dialog
+		handleDestroyDialog() {
+			setTimeout(() => {
+				this.addOrUpdateVisible= false
+			}, /** after dialog animated */ 200);
+		},
 		// 获取字典数据
 		getDictData() {
 			this.initDictList(Object.entries(dictEntries).map(([_, item]) => item.value))
@@ -129,14 +153,19 @@ export default {
 		// 获取数据列表
 		getDataList() {
 			this.dataListLoading = true
+
+			const queryParams = {
+				page: this.pageIndex,
+				limit: this.pageSize,
+				groupId: this.$route.params.id
+			}
+
+			if (this.dataForm.key && this.dataForm.key.trim() !== '') queryParams.key = this.dataForm.key
+
 			this.$http({
 				url: this.$http.adornUrl('/monitoring/equipmentGroupAlarm/page'),
 				method: 'get',
-				params: this.$http.adornParams({
-					page: this.pageIndex,
-					limit: this.pageSize,
-					groupId: this.$route.params.id
-				})
+				params: this.$http.adornParams(queryParams)
 			}).then(({ data }) => {
 				if (data && data.code === 0) {
 					this.dataList = data.data.list

src/views/modules/monitoring/equipmentHistoricalParameters.vue

@@ -0,0 +1,103 @@
+<template>
+	<div class="mod-config">
+		<el-form :inline="true">
+			<el-form-item :label="'当前设备id'">
+				<strong>{{ $route.params.id }}</strong></el-form-item
+			>
+		</el-form>
+
+		<!-- <base-table :page="pageIndex" :size="pageSize" :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" @operate-event="handleOperations" @refreshDataList="getDataList" /> -->
+		<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" />
+	</div>
+</template>
+
+<script>
+import { calcMaxHeight } from '@/utils'
+import { timeFilter } from '@/utils/filters'
+import AddOrUpdate from '@/components/base-dialog/addOrUpdate'
+import i18n from '@/i18n'
+import BaseTable from '@/components/base-table'
+import { pick } from 'lodash/object'
+
+export default {
+	data() {
+		return {
+			calcMaxHeight,
+			tableConfigs: [],
+			dataList: [],
+			dataListLoading: false,
+			dataListSelections: []
+		}
+	},
+	components: {
+		AddOrUpdate,
+		BaseTable
+	},
+	activated() {
+		this.getDataList()
+	},
+	mouted() {
+		this.getDataList()
+	},
+	methods: {
+		// destroy dialog
+		handleDestroyDialog() {
+			setTimeout(() => {
+				this.addOrUpdateVisible= false
+			}, /** after dialog animated */ 200);
+		},
+		// 获取数据列表
+		getDataList() {
+			this.dataListLoading = true
+			this.$http({
+				url: this.$http.adornUrl(`/monitoring/equipmentValueMonitor/runLog/${this.$route.params.id}`),
+				method: 'get'
+			}).then(({ data: res }) => {
+				if (
+					res &&
+					res.code === 0 &&
+					res.data &&
+					res.data.length > 0 &&
+					res.data[0].nameData &&
+					res.data[0].nameData.length > 0 &&
+					res.data[0].data &&
+					res.data[0].data.length > 0
+				) {
+					this.setTableProps(res.data[0].nameData)
+					this.setTableData(res.data[0].data)
+				} else {
+					this.dataList = []
+				}
+				this.dataListLoading = false
+			})
+		},
+		setTableProps(nameData) {
+			this.tableConfigs = [
+				{
+					type: 'index',
+					name: i18n.t('index')
+				},
+				{ prop: 'time', name: '时间', filter: timeFilter },
+				{ prop: 'plcCode', name: 'PLC 编码' },
+				{ prop: 'equName', name: '设备名称' },
+				{ prop: 'equCode', name: '设备编码' },
+				// ...['数值1', '数值2', '数值3'].map(name => {
+				// 	return { prop: name, name }
+				// })
+				...Array.from(new Set(nameData.map(item => item.name))).map(name => ({ prop: name, name }))
+			]
+		},
+		setTableData(data) {
+			this.dataList = data.map(item => {
+				const rowItem = pick(item, ['time', 'plcCode', 'equName', 'equCode'])
+				if (item.data && item.data.length > 0) {
+					item.data.forEach(param => {
+						rowItem[param.dynamicName] = param.dynamicValue
+					})
+				}
+				return rowItem
+			})
+		}
+	}
+}
+</script>

src/views/modules/monitoring/equipmentPlc.vue

@@ -1,11 +1,11 @@
 <template>
 	<div class="mod-config">
-		<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+		<el-form :inline="true" :model="dataForm" @keyup.enter.native="currentChangeHandle(1)">
 			<el-form-item>
 				<el-input v-model="dataForm.key" :placeholder="$t('name') + ' / ' + $t('code')" clearable></el-input>
 			</el-form-item>
 			<el-form-item>
-				<el-button @click="getDataList()">{{ $t('query') }}</el-button>
+				<el-button @click="currentChangeHandle(1)">{{ $t('query') }}</el-button>
 				<el-button v-if="$hasPermission('monitoring:equipmentplc:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
 			</el-form-item>
 		</el-form>
@@ -22,7 +22,7 @@
 		>
 		</el-pagination>
 		<!-- 弹窗, 新增 / 修改 -->
-		<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" :configs="addOrUpdateConfigs" @refreshDataList="getDataList" @destory-dialog="addOrUpdateVisible = false" />
+		<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" :configs="addOrUpdateConfigs" @refreshDataList="getDataList" @destory-dialog="handleDestroyDialog" />
 	</div>
 </template>
 
@@ -106,6 +106,12 @@ export default {
 		this.getDataList()
 	},
 	methods: {
+		// destroy dialog
+		handleDestroyDialog() {
+			setTimeout(() => {
+				this.addOrUpdateVisible= false
+			}, /** after dialog animated */ 200);
+		},
 		//handleOperations
 		handleOperations({ type, data: id }) {
 			switch (type) {

src/views/modules/monitoring/equipmentPlcConnect.vue

@@ -1,16 +1,16 @@
 <template>
 	<div class="mod-config">
-		<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+		<el-form :inline="true" :model="dataForm" @keyup.enter.native="currentChangeHandle(1)">
 			<el-form-item>
 				<el-input v-model="dataForm.key" :placeholder="$t('eq.name') + ' / ' + $t('eq.code')" clearable></el-input>
 			</el-form-item>
 			<el-form-item>
-				<el-button @click="getDataList()">{{ $t('query') }}</el-button>
+				<el-button @click="currentChangeHandle(1)">{{ $t('query') }}</el-button>
 				<el-button v-if="$hasPermission('monitoring:equipmentplcconnect:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
 			</el-form-item>
 		</el-form>
 
-		<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" @operate-event="handleOperations" @refreshDataList="getDataList" />
+		<base-table :page="pageIndex" :size="pageSize" :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" @operate-event="handleOperations" @refreshDataList="getDataList" />
 
 		<el-pagination
 			@size-change="sizeChangeHandle"
@@ -23,7 +23,7 @@
 		>
 		</el-pagination>
 		<!-- 弹窗, 新增 / 修改 -->
-		<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" :configs="addOrUpdateConfigs" @refreshDataList="getDataList" @destory-dialog="addOrUpdateVisible = false" />
+		<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" :configs="addOrUpdateConfigs" @refreshDataList="getDataList" @destory-dialog="handleDestroyDialog" />
 	</div>
 </template>
 
@@ -141,6 +141,12 @@ export default {
 		this.getDataList()
 	},
 	methods: {
+		// destroy dialog
+		handleDestroyDialog() {
+			setTimeout(() => {
+				this.addOrUpdateVisible= false
+			}, /** after dialog animated */ 200);
+		},
 		// 设备列表
 		getEqList() {
 			this.$http({

src/views/modules/monitoring/equipmentPlcParam.vue

@@ -1,16 +1,16 @@
 <template>
 	<div class="mod-config">
-		<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+		<el-form :inline="true" :model="dataForm" @keyup.enter.native="currentChangeHandle(1)">
 			<el-form-item>
 				<el-input v-model="dataForm.key" :placeholder="$t('parameter')" clearable></el-input>
 			</el-form-item>
 			<el-form-item>
-				<el-button @click="getDataList()">{{ $t('query') }}</el-button>
+				<el-button @click="currentChangeHandle(1)">{{ $t('query') }}</el-button>
 				<el-button v-if="$hasPermission('monitoring:equipmenplcparam:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
 			</el-form-item>
 		</el-form>
 
-		<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" />
+		<base-table :page="pageIndex" :size="pageSize" :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" />
 		<el-pagination
 			@size-change="sizeChangeHandle"
 			@current-change="currentChangeHandle"
@@ -79,6 +79,12 @@ export default {
 		this.getDataList()
 	},
 	methods: {
+		// destroy dialog
+		handleDestroyDialog() {
+			setTimeout(() => {
+				this.addOrUpdateVisible= false
+			}, /** after dialog animated */ 200);
+		},
 		// 获取数据列表
 		getDataList() {
 			this.dataListLoading = true

src/views/modules/monitoring/equipmentQuantity.vue

@@ -1,16 +1,16 @@
 <template>
 	<div class="mod-config">
-		<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+		<el-form :inline="true" :model="dataForm" @keyup.enter.native="currentChangeHandle(1)">
 			<el-form-item>
 				<el-input v-model="dataForm.key" :placeholder="$t('parameter')" clearable></el-input>
 			</el-form-item>
 			<el-form-item>
-				<el-button @click="getDataList()">{{ $t('query') }}</el-button>
+				<el-button @click="currentChangeHandle(1)">{{ $t('query') }}</el-button>
 				<el-button v-if="$hasPermission('monitoring:equipmenquantity:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
 			</el-form-item>
 		</el-form>
 
-		<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" />
+		<base-table :page="pageIndex" :size="pageSize" :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" />
 		<el-pagination
 			@size-change="sizeChangeHandle"
 			@current-change="currentChangeHandle"
@@ -85,6 +85,12 @@ export default {
 		this.getDataList()
 	},
 	methods: {
+		// destroy dialog
+		handleDestroyDialog() {
+			setTimeout(() => {
+				this.addOrUpdateVisible= false
+			}, /** after dialog animated */ 200);
+		},
 		// 获取数据列表
 		getDataList() {
 			this.dataListLoading = true

src/views/modules/monitoring/equipmentStatusLog.vue

@@ -1,16 +1,16 @@
 <template>
 	<div class="mod-config">
-		<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+		<el-form :inline="true" :model="dataForm" @keyup.enter.native="currentChangeHandle(1)">
 			<el-form-item>
 				<el-input v-model="dataForm.key" :placeholder="$t('parameter')" clearable></el-input>
 			</el-form-item>
 			<el-form-item>
-				<el-button @click="getDataList()">{{ $t('query') }}</el-button>
+				<el-button @click="currentChangeHandle(1)">{{ $t('query') }}</el-button>
 				<el-button v-if="$hasPermission('monitoring:equipmenstatuslog:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
 			</el-form-item>
 		</el-form>
 
-		<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" />
+		<base-table :page="pageIndex" :size="pageSize" :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" />
 		<el-pagination
 			@size-change="sizeChangeHandle"
 			@current-change="currentChangeHandle"
@@ -81,6 +81,12 @@ export default {
 		this.getDataList()
 	},
 	methods: {
+		// destroy dialog
+		handleDestroyDialog() {
+			setTimeout(() => {
+				this.addOrUpdateVisible= false
+			}, /** after dialog animated */ 200);
+		},
 		// 获取数据列表
 		getDataList() {
 			this.dataListLoading = true

src/views/modules/monitoring/equipmentTimesequence.vue

@@ -0,0 +1,547 @@
+<template>
+	<!-- 设备效率分析 -->
+	<div class="mod-config">
+		<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+			<!-- 产线 -->
+			<el-form-item>
+				<el-select v-model="dataForm.productlines" :placeholder="'产线'" @change="handleProductLineChange" clearable>
+					<el-option v-for="productLine in productLineList" :key="productLine.id" :value="productLine.id"
+						:label="productLine.name" />
+				</el-select>
+			</el-form-item>
+			<!-- 工序 -->
+			<el-form-item>
+				<!-- <el-select v-model="dataForm.factoryId" :placeholder="$t('eq.name') + ' / ' + $t('eq.code')" clearable></el-select> -->
+				<el-select v-model="dataForm.wsId" :placeholder="'工序'" clearable>
+					<el-option v-for="ws in wsList" :key="ws.id" :value="ws.id" :label="ws.name" />
+				</el-select>
+			</el-form-item>
+			<!-- 日期选择 -->
+			<el-form-item>
+				<el-date-picker key="date-picker" v-model="rawTime" type="date" :placeholder="'请选择日期'" format="yyyy-MM-dd" />
+			</el-form-item>
+			<!-- 按钮 -->
+			<el-form-item>
+				<el-button @click="getDataList()">{{ $t('search') }}</el-button>
+				<!-- <el-button v-if="$hasPermission('monitoring:equipmentEffiency:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button> -->
+			</el-form-item>
+			<el-form-item>
+				<el-button type="success" @click="addEq()">{{ '添加设备' }}</el-button>
+			</el-form-item>
+		</el-form>
+
+		<div class="time-chart" style="margin-top: 10px;">
+			<div v-show="equipmentCount > 0" id="time-chart__inner" ref="time-chart__inner" class="time-chart__inner"
+				style="min-height: 50vh;" :style="{ height: autoHeight + 'px', width: '100%' }" />
+			<div v-show="equipmentCount === 0">请先查询数据</div>
+			<!-- <div v-show="equipmentCount === 0">{{ $t('module.basicData.visual.hints.searchFirst') }}</div> -->
+		</div>
+
+		<el-dialog :visible.sync="dialogVisible" :title="'添加设备'" width="30%">
+			<el-select v-model="eqId" style="width: 100%" placeholder="请选择设备" clearable>
+				<el-option v-for="eq in dialogEqList" :key="eq.id" :label="eq.name" :value="eq.id" />
+			</el-select>
+			<div slot="footer">
+				<el-button @click="dialogVisible = false">{{ '取消' }}</el-button>
+				<el-button type="primary" @click="dialogConfirm">{{ '确定' }}</el-button>
+			</div>
+		</el-dialog>
+	</div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+// import i18n from '@/i18n'
+import BaseTable from '@/components/base-table'
+import { calcMaxHeight } from '@/utils'
+import moment from 'moment'
+// import TableOperateComponent from '@/components/base-table/components/operationComponent'
+// import TableTextComponent from '@/components/base-table/components/detailComponent'
+// import { timeFilter } from '@/utils/filters'
+
+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 = 32
+
+	return {
+		type: 'rect',
+		shape: 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
+			}
+		),
+		style: api.style()
+	}
+}
+
+class ChartOption {
+	constructor() {
+		this.color = ['#4caf50', '#ffb300', '#e53935']
+		this.legend = {
+			data: [
+				// i18n.t('module.basicData.visual.echartLegends.working'),
+				'正常',
+				'停机',
+				'故障'
+			],
+			bottom: '0%',
+			selectedMode: false,
+			textStyle: {
+				color: '#000'
+			}
+		}
+		this.tooltip = {
+			formatter: function (params) {
+				return moment(params.value[1]).format('YYYY-MM-DD HH:mm:ss') + ' - ' + moment(params.value[2]).format('YYYY-MM-DD HH:mm:ss') + ' : ' + params.name
+			}
+		}
+		this.title = {
+			// text: i18n.t('module.basicData.visual.echartTitles.eqStatus'),
+			text: '设备状态时序图',
+			left: 'center'
+		}
+		this.xAxis = {
+			type: 'time',
+			// min: +new Date().setHours(0, 0, 0, 0),
+			splitNumber: 24,
+			interval: 3600 * 1000,
+			axisTick: {
+				show: true,
+				alignWithLabel: true
+			},
+			splitLine: {
+				show: true
+			},
+			axisLine: {
+				show: true
+			},
+			axisLabel: {
+				formatter: function (val) {
+					const time = new Date(val)
+					const hour = time.getHours()
+					const minute = time.getMinutes()
+					const hours = hour >= 10 ? hour + '' : '0' + hour
+					const minutes = minute >= 10 ? minute + '' : '0' + minute
+					return hours + ':' + minutes
+				}
+			}
+		}
+		this.yAxis = {
+			// data: Object.keys(eqData).map(item => eqData[item].name)
+			data: []
+		}
+		this.series = [
+			{ name: /** i18n.t('module.basicData.visual.echartLegends.working') */ '正常', type: 'bar', data: [] },
+			{ name: '停机', type: 'bar', data: [] },
+			{ name: '故障', type: 'bar', data: [] },
+			{
+				type: 'custom',
+				renderItem: renderItem,
+				itemStyle: {
+					opacity: 0.8
+				},
+				encode: {
+					x: [1, 2],
+					y: 0
+				},
+				data: []
+			}
+		]
+	}
+
+	setTitle(title) {
+		this.title.text = title
+	}
+
+	// date: 服务器返回来的日期时间数据
+	setXAxis(date) {
+		// this.xAxis.min = +new Date(date).setHours(0)
+		this.xAxis.min = +new Date(date).setHours(0, 0, 0, 0)
+		this.xAxis.max = this.xAxis.min + 3600 * 1000 * 24
+	}
+
+	setYAxis(data) {
+		this.yAxis.data = data
+	}
+
+	setData(data) {
+		this.series[3].data = data
+	}
+}
+
+export default {
+	data() {
+		return {
+			/** hfxny part */
+			wsList: [],
+			productLineList: [],
+			chart: null,
+			chartOption: new ChartOption(),
+			equipments: {},
+			state: ['正常', '停机', '故障'],
+			colors: ['#4caf50', '#ffb300', '#e53935'],
+			// queryBuffer: {},
+			// tableConfigs,
+			calcMaxHeight,
+			timeType: 'range',
+			currentLine: null,
+			rawTime: new Date(),
+			dataForm: {
+				wsId: null,
+				productlines: null,
+				startTime: null,
+				entTime: null
+			},
+			dataList: [],
+			pageIndex: 1,
+			pageSize: 10,
+			totalPage: 0,
+			dataListLoading: false,
+			/** dialog */
+			dialogVisible: false,
+			eqId: null,
+			dialogEqList: []
+		}
+	},
+	components: {
+		BaseTable
+	},
+	computed: {
+		autoHeight: function () {
+			return Object.keys(this.equipments).length * 100 || 500
+		},
+		equipmentCount: function () {
+			return Object.keys(this.equipments).length
+		}
+	},
+	created() {
+		this.getEqList()
+	},
+	mounted() {
+		this.$nextTick(() => {
+			this.initChart()
+		})
+	},
+	activated() {
+		this.getProductLineList().then(() => {
+			this.getWorksetionList()
+		})
+	},
+	updated() {
+		if (this.chart) this.chart.resize()
+	},
+	watch: {
+		timeType() {
+			// 防止切换日期类型时报错
+			this.rawTime = null
+		}
+	},
+	methods: {
+		initChart() {
+			if (!this.chart) {
+				this.chart = echarts.init(this.$refs['time-chart__inner'])
+			}
+		},
+		// 获取产线列表
+		getProductLineList() {
+			return this.$http({
+				url: this.$http.adornUrl('/monitoring/productionLine/list'),
+				method: 'get'
+			}).then(({ data: res }) => {
+				if (res && res.code === 0) {
+					this.productLineList = res.data
+					/** set default */
+					if (this.productLineList.length) {
+						this.dataForm.productlines = this.productLineList[0].id
+					}
+				} else {
+					this.productLineList = []
+				}
+			})
+		},
+
+		// 获取工序列表
+		getWorksetionList() {
+			// 分页列表才有根据产线过滤功能
+			this.$http({
+				// url: this.$http.adornUrl('/monitoring/workshopSection/list'),
+				url: this.$http.adornUrl('/monitoring/workshopSection/page'),
+				method: 'get',
+				params: this.$http.adornParams({
+					limit: 99999,
+					page: 1,
+					lineId: this.dataForm.productlines ?? ''
+				})
+			}).then(({ data: res }) => {
+				if (res && res.code === 0) {
+					this.wsList = res.data.list
+					/** set default */
+					if (this.wsList.length) {
+						this.dataForm.wsId = this.wsList[0].id
+					} else {
+						this.dataForm.wsId = null
+					}
+				} else {
+					this.wsList.splice(0)
+				}
+			})
+		},
+
+		// 把服务器数据按照设备分组
+		transformDataToEquipments(dataList) {
+			console.log('transformDataToEquipments() datalist: ', dataList)
+			const equipments = {}
+			dataList.map(item => {
+				if (equipments[item.eqId]) {
+					// 如果设备已存在
+					// equipments[item.eqId].name = item.eqName
+					equipments[item.eqId].status.push({
+						startTime: +new Date(item.startTime),
+						endTime: +new Date(item.endTime),
+						status: this.state[item.status] // 0 正常、1 停机、2 故障
+					})
+				} else {
+					equipments[item.eqId] = {
+						name: item.eqName,
+						status: [
+							{
+								startTime: +new Date(item.startTime),
+								endTime: +new Date(item.endTime),
+								status: this.state[item.status] // 0 正常、1 停机、2 故障
+							}
+						]
+					}
+				}
+			})
+			console.log('created equipments --- ', equipments)
+			return equipments
+		},
+
+		// 把分组好的设备数据转换为echarts需要的series数据
+		transformEquipmentsToSeries(equipments) {
+			const seriesData = []
+			Object.entries(equipments).map(([key, item], index) => {
+				item.status.forEach(status => {
+					seriesData.push({
+						name: status.status,
+						value: [index, status.startTime, status.endTime],
+						itemStyle: {
+							normal: {
+								color: status.status === '正常' ? '#4caf50' : status.status === '停机' ? '#ffb300' : status.status === '故障' ? '#e53935' : null
+							}
+						}
+					})
+				})
+			})
+			return seriesData
+		},
+
+		// 获取数据列表
+		getDataList() {
+			let startTime = this.rawTime
+				? moment(this.rawTime)
+					.set({ hour: 0, minute: 0, second: 0, millisecond: 0 })
+					.format('YYYY-MM-DDTHH:mm:ss')
+				: ''
+			let endTime = startTime
+				? moment(startTime)
+					.add(1, 'd')
+					.format('YYYY-MM-DDTHH:mm:ss')
+				: ''
+
+			// this.dataListLoading = true
+			const condition = {
+				startTime,
+				endTime,
+				productlines: [this.dataForm.productlines],
+				wsId: this.dataForm.wsId
+			}
+
+			/** fetch data */
+			this.$http({
+				url: this.$http.adornUrl('/monitoring/eqAnalysis/timeAndStatus'),
+				method: 'post',
+				data: condition
+			}).then(({ data: res }) => {
+				if (res.code === 500) {
+					this.dataList.splice(0)
+					this.equipments = {} // 关闭 echarts 的显示
+					this.$message.error(res.msg)
+				} else {
+					/** handle actual data */
+					this.dataList = res.data
+
+					/** test data */
+					// this.dataList = [
+					// 	{
+					// 		eqId: 'eq-001',
+					// 		eqName: 'A1预热机',
+					// 		startTime: '2022-05-04T00:30:34',
+					// 		endTime: '2022-05-04T08:30:34',
+					// 		status: 0
+					// 	},
+					// 	{
+					// 		eqId: 'eq-001',
+					// 		eqName: 'A1预热机',
+					// 		startTime: '2022-05-04T08:30:34',
+					// 		endTime: '2022-05-04T09:30:34',
+					// 		status: 1
+					// 	},
+					// 	{
+					// 		eqId: 'eq-001',
+					// 		eqName: 'A1预热机',
+					// 		startTime: '2022-05-04T09:30:34',
+					// 		endTime: '2022-05-04T11:30:34',
+					// 		status: 2
+					// 	},
+					// 	{
+					// 		eqId: 'eq-001',
+					// 		eqName: 'A1预热机',
+					// 		startTime: '2022-05-04T11:30:34',
+					// 		endTime: '2022-05-04T13:30:34',
+					// 		status: 1
+					// 	}
+					// ]
+
+					this.equipments = this.transformDataToEquipments(this.dataList)
+					this.chartOption.setYAxis(Object.keys(this.equipments).map(eId => this.equipments[eId].name))
+					console.log('(((set x axis))): ', this.dataList[0].startTime)
+					this.chartOption.setXAxis(this.dataList[0].startTime)
+					this.chartOption.setData(this.transformEquipmentsToSeries(this.equipments))
+
+					this.$nextTick(() => {
+						this.renderChart()
+					})
+				}
+			})
+		},
+
+		handleProductLineChange(val) {
+			this.getWorksetionList()
+		},
+
+		// 渲染 echarts
+		renderChart() {
+			console.log('>>> chart configs: ', this.chartOption)
+			this.chart.setOption(this.chartOption)
+		},
+
+		// 获取对话框里的设备列表
+		getEqList() {
+			this.$http({
+				url: this.$http.adornUrl('/monitoring/equipment/page'),
+				method: 'get',
+				params: this.$http.adornParams({
+					page: 1,
+					limit: 99999
+				})
+			}).then(({ data }) => {
+				if (data && data.code === 0) {
+					this.dialogEqList = data.data.list
+				} else {
+					this.dialogEqList.splice(0)
+				}
+			})
+		},
+
+		// 添加设备
+		addEq() {
+			if (this.equipmentCount) {
+				this.dialogVisible = true
+			} else {
+				this.$message.warning('请先查询数据')
+			}
+		},
+
+		// 确认添加设备
+		dialogConfirm() {
+			let startTime = this.rawTime
+				? moment(this.rawTime)
+					.set({ hour: 0, minute: 0, second: 0, millisecond: 0 })
+					.format('YYYY-MM-DDTHH:mm:ss')
+				: ''
+			let endTime = startTime
+				? moment(startTime)
+					.add(1, 'd')
+					.format('YYYY-MM-DDTHH:mm:ss')
+				: ''
+
+			const condition = {
+				startTime,
+				endTime,
+				productlines: [this.dataForm.productlines],
+				wsId: this.dataForm.wsId,
+				eqId: this.eqId
+			}
+
+			/** fetch data */
+			this.$http({
+				url: this.$http.adornUrl('/monitoring/eqAnalysis/timeAndStatus'),
+				method: 'post',
+				data: condition
+			}).then(({ data: res }) => {
+				if (res.code === 500) {
+					this.$message.error(res.msg)
+				} else {
+					/** handle new equipment */
+					const newEqStatusList = res.data
+					console.log('添加设备', res)
+					const newEq = this.transformDataToEquipments(newEqStatusList)
+					this.$set(this.equipments, Object.keys(newEq)[0], newEq[Object.keys(newEq)[0]])
+					this.chartOption.setYAxis(Object.keys(this.equipments).map(item => this.equipments[item].name))
+					this.chartOption.setData(this.transformEquipmentsToSeries(this.equipments))
+
+					this.$message.success('新设备数据获取成功')
+					this.$nextTick(() => {
+						this.dialogVisible = false
+						this.renderChart()
+					})
+				}
+			})
+		},
+
+		// 每页数
+		sizeChangeHandle(val) {
+			this.pageSize = val
+			this.pageIndex = 1
+			this.getDataList()
+		},
+		// 当前页
+		currentChangeHandle(val) {
+			this.pageIndex = val
+			this.getDataList()
+		},
+		// 多选
+		selectionChangeHandle(val) {
+			this.dataListSelections = val
+		},
+		handleOperations({ type, data: id }) {
+			switch (type) {
+				case 'view-detail':
+					return this.addOrUpdateHandle(id, true)
+				case 'edit':
+					return this.addOrUpdateHandle(id)
+				case 'delete':
+					return this.deleteHandle(id)
+			}
+		}
+	}
+}
+</script>
+
+<style scoped>
+/* .time-chart__inner {
+	transition: all 300ms ease-out;
+} */
+</style>

src/views/modules/monitoring/equipmentType.vue

@@ -1,16 +1,24 @@
 <template>
 	<div class="mod-config">
-		<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+		<el-form :inline="true" :model="dataForm" @keyup.enter.native="currentChangeHandle(1)">
 			<el-form-item>
 				<el-input v-model="dataForm.key" :placeholder="$t('eq.type')" clearable></el-input>
 			</el-form-item>
 			<el-form-item>
-				<el-button @click="getDataList()">{{ $t('query') }}</el-button>
+				<el-button @click="currentChangeHandle(1)">{{ $t('query') }}</el-button>
 				<el-button v-if="$hasPermission('monitoring:equipmenttype:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
 			</el-form-item>
 		</el-form>
 
-		<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" @operate-event="handleOperations" @refreshDataList="getDataList" />
+		<base-table
+			:page="pageIndex"
+			:size="pageSize"
+			:data="dataList"
+			:table-head-configs="tableConfigs"
+			:max-height="calcMaxHeight(8)"
+			@operate-event="handleOperations"
+			@refreshDataList="getDataList"
+		/>
 		<el-pagination
 			@size-change="sizeChangeHandle"
 			@current-change="currentChangeHandle"
@@ -22,7 +30,7 @@
 		>
 		</el-pagination>
 		<!-- 弹窗, 新增 / 修改 -->
-		<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" :configs="addOrUpdateConfigs" @refreshDataList="getDataList" @destory-dialog="addOrUpdateVisible = false" />
+		<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" :configs="addOrUpdateConfigs" @refreshDataList="getDataList" @destory-dialog="handleDestroyDialog" />
 	</div>
 </template>
 
@@ -52,8 +60,8 @@ const addOrUpdateConfigs = {
 	type: 'dialog',
 	infoUrl: '/monitoring/equipmentType',
 	fields: [
-		{ name: 'name', label: i18n.t('eq.type') },
-		{ name: 'code', label: i18n.t('eq.typecode'), api: '/monitoring/equipmentType/getCode' },
+		{ name: 'name', required: true, label: i18n.t('eq.type') },
+		{ name: 'code', required: true, label: i18n.t('eq.typecode'), api: '/monitoring/equipmentType/getCode' },
 		{ name: 'parentId', label: i18n.t('eq.parent'), type: 'cascader', props: { label: 'name', value: 'id', checkStrictly: true, emitPath: false }, options: [] },
 		'remark'
 	],
@@ -106,6 +114,12 @@ export default {
 		this.getDataList()
 	},
 	methods: {
+		// destroy dialog
+		handleDestroyDialog() {
+			setTimeout(() => {
+				this.addOrUpdateVisible = false
+			}, /** after dialog animated */ 200)
+		},
 		// 获取设备类型树形数据
 		getTreeEquipmentType() {
 			this.$http({

src/views/modules/monitoring/equipmentTypeFile.vue

@@ -1,11 +1,11 @@
 <template>
 	<div class="mod-config">
-		<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+		<el-form :inline="true" :model="dataForm" @keyup.enter.native="currentChangeHandle(1)">
 			<el-form-item>
 				<el-input v-model="dataForm.key" :placeholder="$t('parameter')" clearable></el-input>
 			</el-form-item>
 			<el-form-item>
-				<el-button @click="getDataList()">{{ $t('query') }}</el-button>
+				<el-button @click="currentChangeHandle(1)">{{ $t('query') }}</el-button>
 				<el-button v-if="$hasPermission('monitoring:equipmentypefile:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
 			</el-form-item>
 		</el-form>
@@ -81,6 +81,12 @@ export default {
 		this.getDataList()
 	},
 	methods: {
+		// destroy dialog
+		handleDestroyDialog() {
+			setTimeout(() => {
+				this.addOrUpdateVisible= false
+			}, /** after dialog animated */ 200);
+		},
 		// 获取数据列表
 		getDataList() {
 			this.dataListLoading = true

src/views/modules/monitoring/equipmentattr.vue

@@ -1,16 +1,16 @@
 <template>
 	<div class="mod-config">
-		<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+		<el-form :inline="true" :model="dataForm" @keyup.enter.native="currentChangeHandle(1)">
 			<el-form-item>
 				<el-input v-model="dataForm.key" :placeholder="$t('parameter')" clearable></el-input>
 			</el-form-item>
 			<el-form-item>
-				<el-button @click="getDataList()">{{ $t('query') }}</el-button>
+				<el-button @click="currentChangeHandle(1)">{{ $t('query') }}</el-button>
 				<el-button v-if="$hasPermission('monitoring:equipmenattr:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
 			</el-form-item>
 		</el-form>
 
-		<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" />
+		<base-table :page="pageIndex" :size="pageSize" :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" />
 		<el-pagination
 			@size-change="sizeChangeHandle"
 			@current-change="currentChangeHandle"
@@ -79,6 +79,12 @@ export default {
 		this.getDataList()
 	},
 	methods: {
+		// destroy dialog
+		handleDestroyDialog() {
+			setTimeout(() => {
+				this.addOrUpdateVisible= false
+			}, /** after dialog animated */ 200);
+		},
 		// 获取数据列表
 		getDataList() {
 			this.dataListLoading = true

src/views/modules/monitoring/factory.vue

@@ -1,16 +1,24 @@
 <template>
 	<div class="mod-config">
-		<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+		<el-form :inline="true" :model="dataForm" @keyup.enter.native="currentChangeHandle(1)">
 			<el-form-item>
 				<el-input v-model="dataForm.key" :placeholder="$t('factory.name') + ' / ' + $t('factory.code')" clearable></el-input>
 			</el-form-item>
 			<el-form-item>
-				<el-button @click="getDataList()">{{ $t('query') }}</el-button>
+				<el-button @click="currentChangeHandle(1)">{{ $t('query') }}</el-button>
 				<el-button v-if="$hasPermission('monitoring:factory:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
 			</el-form-item>
 		</el-form>
 
-		<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" @operate-event="handleOperations" @refreshDataList="getDataList" />
+		<base-table
+			:page="pageIndex"
+			:size="pageSize"
+			:data="dataList"
+			:table-head-configs="tableConfigs"
+			:max-height="calcMaxHeight(8)"
+			@operate-event="handleOperations"
+			@refreshDataList="getDataList"
+		/>
 		<el-pagination
 			@size-change="sizeChangeHandle"
 			@current-change="currentChangeHandle"
@@ -22,7 +30,7 @@
 		>
 		</el-pagination>
 		<!-- 弹窗, 新增 / 修改 -->
-		<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" :configs="addOrUpdateConfigs" @refreshDataList="getDataList" @destory-dialog="addOrUpdateVisible = false" />
+		<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" :configs="addOrUpdateConfigs" @refreshDataList="getDataList" @destory-dialog="handleDestroyDialog" />
 	</div>
 </template>
 
@@ -53,9 +61,10 @@ const addOrUpdateConfigs = {
 	type: 'dialog',
 	infoUrl: '/monitoring/factory',
 	fields: [
-		'name',
+		{ name: 'name', required: true },
 		{
 			name: 'code',
+			required: true,
 			api: '/monitoring/factory/getCode'
 		},
 		{
@@ -99,6 +108,12 @@ export default {
 		this.getDataList()
 	},
 	methods: {
+		// destroy dialog
+		handleDestroyDialog() {
+			setTimeout(() => {
+				this.addOrUpdateVisible = false
+			}, /** after dialog animated */ 200)
+		},
 		// 获取数据列表
 		getDataList() {
 			this.addOrUpdateVisible = false
@@ -114,7 +129,8 @@ export default {
 			}).then(({ data }) => {
 				if (data && data.code === 0) {
 					this.dataList = data.data.list
-					this.totalPage = data.data.totalCount
+					this.totalPage = data.data.total
+					console.log('total page: ', this.totalPage)
 				} else {
 					this.dataList = []
 					this.totalPage = 0

src/views/modules/monitoring/product.vue

@@ -1,18 +1,26 @@
 <template>
 	<div class="mod-config">
-		<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+		<el-form :inline="true" :model="dataForm" @keyup.enter.native="currentChangeHandle(1)">
 			<el-form-item>
 				<el-input v-model="dataForm.key" :placeholder="$t('prod.name') + ' / ' + $t('prod.code')" clearable></el-input>
 			</el-form-item>
 			<el-form-item>
-				<el-button @click="getDataList()">{{ $t('query') }}</el-button>
+				<el-button @click="currentChangeHandle(1)">{{ $t('query') }}</el-button>
 				<!-- <el-button @click="addOrEdit()">测试</el-button> -->
 				<!-- <el-button v-if="$hasPermission('monitoring:product:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button> -->
 				<el-button v-if="$hasPermission('monitoring:product:save')" type="primary" @click="addOrEdit()">{{ $t('add') }}</el-button>
 			</el-form-item>
 		</el-form>
 
-		<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" @operate-event="handleOperations" @refreshDataList="getDataList" />
+		<base-table
+			:page="pageIndex"
+			:size="pageSize"
+			:data="dataList"
+			:table-head-configs="tableConfigs"
+			:max-height="calcMaxHeight(8)"
+			@operate-event="handleOperations"
+			@refreshDataList="getDataList"
+		/>
 
 		<el-pagination
 			@size-change="sizeChangeHandle"
@@ -25,8 +33,7 @@
 		></el-pagination>
 		<!-- 弹窗, 新增 / 修改 -->
 		<!-- <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update> -->
-
-		<base-dialog v-if="showbasedialog" ref="basedialog" :configs="addOrUpdateConfigs" @refreshDataList="getDataList" @destory-dialog="showbasedialog = false" />
+		<base-dialog v-if="showbasedialog" ref="basedialog" :configs="addOrUpdateConfigs" @refreshDataList="getDataList" @destory-dialog="handleDestroyDialog" />
 	</div>
 </template>
 
@@ -52,16 +59,24 @@ const tableConfigs = [
 	{ prop: 'code', name: i18n.t('prod.code') },
 	{ prop: 'specifications', name: i18n.t('prod.spec') },
 	{ prop: 'unitDictValue', name: i18n.t('unit'), filter: dictFilter(UnitDictTypeId) },
-	{ prop: 'operations', name: i18n.t('handle'), fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['viewAttr', 'delete'] }
+	{ prop: 'operations', name: i18n.t('handle'), fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['edit', 'delete'] }
+	// { prop: 'operations', name: i18n.t('handle'), fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['edit', 'viewAttr', 'delete'] }
 ]
 
 const addOrUpdateConfigs = {
 	type: 'dialog', // dialog | drawer | page
 	infoUrl: '/monitoring/product',
 	fields: [
-		'name',
+		// 'name',
+		{
+			name: 'name',
+			required: true
+			// label: i18n.t('pl.name')
+		},
 		{
 			name: 'code',
+			required: true,
+			// label: i18n.t('pl.code'),
 			api: '/monitoring/product/getCode'
 		},
 		{
@@ -166,7 +181,12 @@ export default {
 		this.getDataList()
 	},
 	methods: {
-		//
+		// destroy dialog
+		handleDestroyDialog() {
+			setTimeout(() => {
+				this.showbasedialog = false
+			}, /** after dialog animated */ 200)
+		},
 		addOrEdit(id) {
 			this.showbasedialog = true
 			this.$nextTick(() => {
@@ -222,6 +242,8 @@ export default {
 		// 表格操作事件管理
 		handleOperations({ type, data }) {
 			switch (type) {
+				case 'edit': // <== 对照 tableConfig
+					return this.addOrEdit(data)
 				case 'viewAttr': // <== 对照 tableConfig
 					return this.addOrEdit(data)
 				case 'delete':

src/views/modules/monitoring/productArrt.vue

@@ -1,11 +1,11 @@
 <template>
 	<div class="mod-config">
-		<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+		<el-form :inline="true" :model="dataForm" @keyup.enter.native="currentChangeHandle(1)">
 			<el-form-item>
 				<el-input v-model="dataForm.key" :placeholder="$t('parameter')" clearable></el-input>
 			</el-form-item>
 			<el-form-item>
-				<el-button @click="getDataList()">{{ $t('query') }}</el-button>
+				<el-button @click="currentChangeHandle(1)">{{ $t('query') }}</el-button>
 				<el-button v-if="$hasPermission('monitoring:productarrt:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
 			</el-form-item>
 		</el-form>
@@ -22,7 +22,7 @@
 		>
 		</el-pagination>
 		<!-- 弹窗, 新增 / 修改 -->
-		<add-or-update v-if="addOrUpdateVisible" :configs="addOrUpdateConfigs" ref="addOrUpdate" @refreshDataList="getDataList" @destroy-dialog="addOrUpdateVisible = false" />
+		<add-or-update v-if="addOrUpdateVisible" :configs="addOrUpdateConfigs" ref="addOrUpdate" @refreshDataList="getDataList" @destory-dialog="handleDestroyDialog" />
 	</div>
 </template>
 
@@ -111,6 +111,12 @@ export default {
 		this.getDataList()
 	},
 	methods: {
+		// destroy dialog
+		handleDestroyDialog() {
+			setTimeout(() => {
+				this.addOrUpdateVisible = false
+			}, /** after dialog animated */ 200)
+		},
 		// 获取产品列表
 		getProductList() {
 			this.$http({

src/views/modules/monitoring/productionLine.vue

@@ -1,16 +1,24 @@
 <template>
 	<div class="mod-config">
-		<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+		<el-form :inline="true" :model="dataForm" @keyup.enter.native="currentChangeHandle(1)">
 			<el-form-item>
 				<el-input v-model="dataForm.key" :placeholder="$t('pl.name')" clearable></el-input>
 			</el-form-item>
 			<el-form-item>
-				<el-button @click="getDataList()">{{ $t('query') }}</el-button>
+				<el-button @click="currentChangeHandle(1)">{{ $t('query') }}</el-button>
 				<el-button v-if="$hasPermission('monitoring:productionline:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
 			</el-form-item>
 		</el-form>
 
-		<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" @operate-event="handleOperations" @refreshDataList="getDataList" />
+		<base-table
+			:page="pageIndex"
+			:size="pageSize"
+			:data="dataList"
+			:table-head-configs="tableConfigs"
+			:max-height="calcMaxHeight(8)"
+			@operate-event="handleOperations"
+			@refreshDataList="getDataList"
+		/>
 		<el-pagination
 			@size-change="sizeChangeHandle"
 			@current-change="currentChangeHandle"
@@ -22,7 +30,7 @@
 		>
 		</el-pagination>
 		<!-- 弹窗, 新增 / 修改 -->
-		<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" :configs="addOrUpdateConfigs" @refreshDataList="getDataList" @destory-dialog="addOrUpdateVisible = false" />
+		<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" :configs="addOrUpdateConfigs" @refreshDataList="getDataList" @destory-dialog="handleDestroyDialog" />
 	</div>
 </template>
 
@@ -44,7 +52,7 @@ const tableConfigs = [
 	{ prop: 'factoryName', name: i18n.t('factory.title') },
 	{ prop: 'name', name: i18n.t('pl.name') },
 	{ prop: 'code', name: i18n.t('pl.code') },
-	{ prop: 'status', name: i18n.t('pl.status') },
+	{ prop: 'status', name: i18n.t('pl.status'), filter: val => (val === 0 || val === 1 || val === 2) && ['停止', '运行', '未知'][val] },
 	{ prop: 'description', name: i18n.t('desc') },
 	{ prop: 'remark', name: i18n.t('remark') },
 	{ prop: 'operations', name: i18n.t('handle'), fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['edit', 'delete'] }
@@ -54,10 +62,12 @@ const addOrUpdateConfigs = {
 	type: 'dialog',
 	infoUrl: '/monitoring/productionLine',
 	fields: [
-		'name',
-		{ name: 'code', api: '/monitoring/productionLine/getCode' },
+		// 'name',
+		{ name: 'name', label: i18n.t('pl.name'), required: true },
+		{ name: 'code', label: i18n.t('pl.code'), required: true, api: '/monitoring/productionLine/getCode' },
 		{
 			name: 'factoryId',
+			required: true,
 			label: i18n.t('factory.title'),
 			type: 'select',
 			placeholder: i18n.t('pl.factoryHints'),
@@ -109,6 +119,12 @@ export default {
 		this.getDataList()
 	},
 	methods: {
+		// destroy dialog
+		handleDestroyDialog() {
+			setTimeout(() => {
+				this.addOrUpdateVisible = false
+			}, /** after dialog animated */ 200)
+		},
 		// 获取工厂列表
 		getFactoryList() {
 			this.$http.get(this.$http.adornUrl('/monitoring/factory/list')).then(({ data: res }) => {

src/views/modules/monitoring/productionLineRecSch.vue

@@ -1,11 +1,11 @@
 <template>
 	<div class="mod-config">
-		<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+		<el-form :inline="true" :model="dataForm" @keyup.enter.native="currentChangeHandle(1)">
 			<el-form-item>
 				<el-input v-model="dataForm.key" :placeholder="$t('parameter')" clearable></el-input>
 			</el-form-item>
 			<el-form-item>
-				<el-button @click="getDataList()">{{ $t('query') }}</el-button>
+				<el-button @click="currentChangeHandle(1)">{{ $t('query') }}</el-button>
 				<el-button v-if="$hasPermission('monitoring:productionlinerecsch:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
 			</el-form-item>
 		</el-form>
@@ -72,6 +72,12 @@ export default {
 		this.getDataList()
 	},
 	methods: {
+		// destroy dialog
+		handleDestroyDialog() {
+			setTimeout(() => {
+				this.addOrUpdateVisible= false
+			}, /** after dialog animated */ 200);
+		},
 		// 获取数据列表
 		getDataList() {
 			this.dataListLoading = true

src/views/modules/monitoring/qualityInspectionBoxBtn.vue

@@ -0,0 +1,368 @@
+<template>
+	<div class="mod-config">
+		<el-form :inline="true" :model="dataForm" @keyup.enter.native="currentChangeHandle(1)">
+			<!-- <el-form-item> -->
+			<!-- <el-input v-model="dataForm.key" :placeholder="$t('eq.name') + ' / ' + $t('eq.code')" clearable></el-input>
+			</el-form-item> -->
+			<el-form-item>
+				<el-button @click="currentChangeHandle(1)">{{ $t('search') }}</el-button>
+				<el-button v-if="$hasPermission('monitoring:qualityInspectionBoxBtn:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
+				<!-- <el-button v-if="$hasPermission('monitoring:equipment:export')" @click="exportHandle()">{{ $t('export') }}</el-button> -->
+			</el-form-item>
+		</el-form>
+
+		<base-table
+			:page="pageIndex"
+			:size="pageSize"
+			:data="dataList"
+			:table-head-configs="tableConfigs"
+			:max-height="calcMaxHeight(8)"
+			@operate-event="handleOperations"
+			@refreshDataList="getDataList"
+		/>
+		<el-pagination
+			@size-change="sizeChangeHandle"
+			@current-change="currentChangeHandle"
+			:current-page="pageIndex"
+			:page-sizes="[10, 20, 50, 100]"
+			:page-size="pageSize"
+			:total="totalPage"
+			layout="total, sizes, prev, pager, next, jumper"
+		></el-pagination>
+		<!-- 弹窗, 新增 / 修改 -->
+		<add-or-update
+			v-if="addOrUpdateVisible"
+			ref="addOrUpdate"
+			:configs="addOrUpdateConfigs"
+			@refreshDataList="getDataList"
+			@select-change="handleDialogSelectChange"
+			@destory-dialog="handleDestroyDialog"
+		/>
+	</div>
+</template>
+
+<script>
+import i18n from '@/i18n'
+import AddOrUpdate from '@/components/base-dialog/addOrUpdate'
+// import AddOrUpdate from './equipment-add-or-update'
+import BaseTable from '@/components/base-table'
+import TableOperateComponent from '@/components/base-table/components/operationComponent'
+// import TableTextComponent from '@/components/base-table/components/detailComponent'
+// import CKEditor from 'ckeditor4-vue'
+import { calcMaxHeight } from '@/utils'
+import { timeFilter } from '@/utils/filters'
+// import Cookies from 'js-cookie'
+
+const tableConfigs = [
+	{
+		type: 'index',
+		name: i18n.t('index')
+	},
+	{
+		prop: 'createTime',
+		name: i18n.t('createTime'),
+		filter: timeFilter
+	},
+	{ prop: 'inspectionDetContent', name: i18n.t('andeng.inspectContent') }, // name: '检测内容' },
+	{ prop: 'keyValue', name: i18n.t('andeng.btnVal') }, // name: '按钮值' },
+	{ prop: 'model', name: i18n.t('andeng.btnBoxModel') }, // name: '按钮盒模式' },
+
+	{
+		prop: 'operations',
+		name: i18n.t('handle'),
+		fixed: 'right',
+		width: 180,
+		subcomponent: TableOperateComponent,
+		options: ['edit', 'delete']
+	}
+]
+
+const addOrUpdateConfigs = {
+	type: 'dialog',
+	infoUrl: '/monitoring/qualityInspectionBoxBtn',
+	fields: [
+		// { name: 'productionId', label: i18n.t('eq.name'), required: true },
+		{ name: 'productionId', label: i18n.t('pl.title'), required: true, type: 'select', options: [], relatedField: 'sectionId' },
+		{ name: 'sectionId', label: i18n.t('ws.title'), required: true, type: 'select', options: [] },
+		{ name: 'model', label: i18n.t('andeng.btnBoxModel') },
+		{
+			name: 'keyValue',
+			label: i18n.t('andeng.btnVal'),
+			required: true,
+			rules: [{ type: 'integer', trigger: 'blur', message: i18n.t('hints.integer'), transform: val => Number(val) }]
+		},
+		{
+			name: 'inspectionDetContent',
+			label: i18n.t('andeng.inspectContent')
+		}
+	],
+	operations: [
+		{ name: 'cancel', showAlways: true },
+		{
+			name: 'save',
+			url: '/monitoring/qualityInspectionBoxBtn',
+			permission: 'monitoring:qualityInspectionBoxBtn:save',
+			showOnEdit: false
+		},
+		{
+			name: 'update',
+			url: '/monitoring/qualityInspectionBoxBtn',
+			permission: 'monitoring:qualityInspectionBoxBtn:update',
+			showOnEdit: true
+		}
+	]
+}
+
+export default {
+	data() {
+		return {
+			calcMaxHeight,
+			tableConfigs,
+			addOrUpdateConfigs,
+			dataForm: {
+				key: ''
+			},
+			dataList: [],
+			pageIndex: 1,
+			pageSize: 10,
+			totalPage: 0,
+			dataListLoading: false,
+			dataListSelections: [],
+			addOrUpdateVisible: false
+		}
+	},
+	components: {
+		AddOrUpdate,
+		BaseTable
+	},
+	activated() {
+		this.getDataList()
+		this.getPlList()
+		this.getWsList()
+	},
+	methods: {
+		// destroy dialog
+		handleDestroyDialog() {
+			setTimeout(() => {
+				this.addOrUpdateVisible = false
+			}, /** after dialog animated */ 200)
+		},
+		// 获取产线列表，用于刷新工段列表
+		getPlList() {
+			this.$http({
+				url: this.$http.adornUrl('/monitoring/productionLine/list'),
+				method: 'get'
+			}).then(({ data: res }) => {
+				const plConfig = this.addOrUpdateConfigs.fields.find(item => item.name === 'productionId')
+				plConfig.options =
+					res.data?.map(item => ({
+						value: item.id,
+						label: item.name
+					})) || []
+			})
+		},
+		// 获取工段列表
+		getWsList(id) {
+			let params = {
+				page: 1,
+				limit: 999
+			}
+			if (id) {
+				params.lineId = id
+			}
+			this.$http({
+				url: this.$http.adornUrl('/monitoring/workshopSection/page'),
+				method: 'get',
+				params: this.$http.adornParams(params)
+			}).then(({ data: res }) => {
+				const wsConfig = this.addOrUpdateConfigs.fields.find(item => item.name === 'sectionId')
+				wsConfig.options =
+					res.data?.list?.map(item => ({
+						value: item.id,
+						label: item.name
+					})) || []
+			})
+		},
+		// 获取设备类型列表
+		getTypeList() {
+			this.$http({
+				url: this.$http.adornUrl('/monitoring/equipmentType/page'),
+				method: 'get',
+				params: this.$http.adornParams({
+					// page: this.pageIndex,
+					// limit: this.pageSize,
+					// key: this.dataForm.key
+				})
+			}).then(({ data }) => {
+				const eqTypeConfig = this.addOrUpdateConfigs.fields.find(item => item.name === 'equipmentTypeId')
+				eqTypeConfig.options =
+					data.data?.list?.map(item => ({
+						value: item.id,
+						label: item.name
+					})) || []
+			})
+		},
+		// 获取设备分组列表
+		getGroupList() {
+			this.$http({
+				url: this.$http.adornUrl('/monitoring/equipmentGroup/page'),
+				method: 'get',
+				params: this.$http.adornParams({
+					// page: this.pageIndex,
+					// limit: this.pageSize,
+					// key: this.dataForm.key
+				})
+			}).then(({ data }) => {
+				const groupConfig = this.addOrUpdateConfigs.fields.find(item => item.name === 'groupId')
+				groupConfig.options =
+					data.data?.list?.map(item => ({
+						value: item.id,
+						label: item.name
+					})) || []
+			})
+		},
+		// 获取数据列表
+		getDataList() {
+			this.dataListLoading = true
+			this.$http({
+				url: this.$http.adornUrl('/monitoring/qualityInspectionBoxBtn/page'),
+				method: 'get',
+				params: this.$http.adornParams({
+					page: this.pageIndex,
+					limit: this.pageSize
+					// key: this.dataForm.key
+				})
+			}).then(({ data }) => {
+				if (data && data.code === 0) {
+					this.dataList = data.data.list
+					// this.dataList = new Array(20).fill('1')
+					// console.log('data list', this.dataList)
+					this.totalPage = data.data.total
+				} else {
+					this.dataList = []
+					this.totalPage = 0
+				}
+				this.dataListLoading = false
+			})
+		},
+		// 每页数
+		sizeChangeHandle(val) {
+			this.pageSize = val
+			this.pageIndex = 1
+			this.getDataList()
+		},
+		// 当前页
+		currentChangeHandle(val) {
+			this.pageIndex = val
+			this.getDataList()
+		},
+		// 多选
+		selectionChangeHandle(val) {
+			this.dataListSelections = val
+		},
+		// 对话框里的某个选择改变了
+		handleDialogSelectChange({ name, id }) {
+			switch (name) {
+				case 'productionId':
+					this.getWsList(id)
+			}
+		},
+		handleOperations({ type, data: id }) {
+			switch (type) {
+				case 'view-detail':
+					// const { name, code } = this.dataList.find(item => item.id === id)
+					// this.$router.push({
+					// 	name: 'monitoring-equipmentAdd',
+					// 	params: {
+					// 		isdetail: true,
+					// 		equipmentId: id
+					// 	}
+					// })
+					// break
+					return this.addOrUpdateHandle(id, true)
+				case 'edit':
+					return this.addOrUpdateHandle(id)
+				case 'delete':
+					return this.deleteHandle(id)
+			}
+		},
+		exportHandle() {
+			// this.$http.get(this.$http.adornUrl('/monitoring/equipment/export')).then(({ data: res }) => {
+			this.$http({
+				url: this.$http.adornUrl('/monitoring/equipment/export'),
+				method: 'get',
+				responseType: 'blob'
+			}).then(res => {
+				let fileName = 'equipment-list.xls'
+				if (res.headers['content-disposition']) {
+					const contentDisposition = res.headers['content-disposition']
+					fileName = contentDisposition.slice(contentDisposition.indexOf('filename=') + 9)
+				}
+
+				fileName = decodeURIComponent(fileName)
+
+				const blob = new Blob([res.data])
+
+				if ('download' in document.createElement('a')) {
+					const alink = document.createElement('a')
+					alink.download = fileName
+					alink.style.display = 'none'
+					alink.target = '_blank'
+					alink.href = URL.createObjectURL(blob)
+					document.body.appendChild(alink)
+					alink.click()
+					URL.revokeObjectURL(alink.href)
+					document.body.removeChild(alink)
+				} else {
+					navigator.msSaveBlob(blob, fileName)
+				}
+			})
+		},
+		// 新增 / 修改
+		addOrUpdateHandle(id, isdetail = false) {
+			this.addOrUpdateVisible = true
+			this.$nextTick(() => {
+				this.$refs.addOrUpdate.init(id, isdetail)
+			})
+			// this.$router.push({
+			// 	name: 'monitoring-equipmentAdd',
+			// 	params: {
+			// 		equipmentId: id
+			// 	}
+			// })
+		},
+		// 删除
+		deleteHandle(id) {
+			var ids = id
+				? [id]
+				: this.dataListSelections.map(item => {
+						return item.id
+				  })
+			this.$confirm(`${i18n.t('prompt.info', { handle: id ? i18n.t('delete').toLowerCase() : i18n.t('deleteBatch').toLowerCase() })}`, i18n.t('prompt.title'), {
+				confirmButtonText: i18n.t('confirm'),
+				cancelButtonText: i18n.t('cancel'),
+				type: 'warning'
+			}).then(() => {
+				this.$http({
+					url: this.$http.adornUrl('/monitoring/qualityInspectionBoxBtn'),
+					method: 'delete',
+					data: this.$http.adornData(ids, false, 'raw')
+				}).then(({ data }) => {
+					if (data && data.code === 0) {
+						this.$message({
+							message: i18n.t('prompt.success'),
+							type: 'success',
+							duration: 1500,
+							onClose: () => {
+								this.getDataList()
+							}
+						})
+					} else {
+						this.$message.error(data.msg)
+					}
+				})
+			})
+		}
+	}
+}
+</script>

src/views/modules/monitoring/qualityInspectionCurrent.vue

@@ -70,6 +70,7 @@ import * as echarts from 'echarts'
 
 const tableConfigStatic = [
 	{ type: 'index', width: 100, name: i18n.t('index') },
+	{ name: i18n.t('pl.title'), prop: 'lineName' },
 	{ name: i18n.t('inspect.inTotal'), prop: 'sumUp' },
 	{ name: i18n.t('inspect.outTotal'), prop: 'sumDown' },
 	{ name: i18n.t('inspect.checkTotal'), prop: 'sumCheck' },
@@ -77,7 +78,7 @@ const tableConfigStatic = [
 ]
 const tableConfigDynamic = [
 	{ type: 'index', width: 100, name: i18n.t('index') },
-	{ name: i18n.t('inspect.type'), prop: 'inspectionContent' },
+	{ name: i18n.t('inspect.det'), prop: 'inspectionContent' },
 	/** dynamic */
 	{ name: i18n.t('inspect.typetotal'), prop: '' },
 	{ name: i18n.t('inspect.rate'), prop: '' }
@@ -104,17 +105,31 @@ const FakeChart = {
 			calcMaxHeight,
 			chart: null,
 			defaultOpts: {
+				grid: {
+					left: '5%',
+					right: '12%',
+					top: '20%',
+					bottom: '10%'
+				},
 				title: {
 					text: i18n.t('inspect.typeCount')
 				},
 				tooltip: {},
 				legend: {
 					orient: 'vertical',
+					type: 'scroll',
 					top: 10,
-					right: 20,
-					data: [
-						/** dynamic */
-					]
+					right: 0,
+					width: '12%',
+					/** 修复文本太长时显示问题 */
+					formatter: function(name) {
+						return echarts.format.truncateText(name, 120, '14px Microsoft Yahei', '...')
+					},
+					tooltip: {
+						show: true
+					},
+					/** end */
+					data: []
 				},
 				xAxis: {
 					data: [
@@ -220,11 +235,25 @@ export default {
 				]
 			},
 			echartCategories: null,
-			echartCheckTypes: []
+			echartCheckTypes: [],
+			interval: null
 		}
 	},
 	mounted() {
 		this.getDataList()
+
+		this.interval = setInterval(() => {
+			this.$message.info(i18n.t('refresh'))
+			this.dataListStatic.splice(0)
+			this.dataListDynamic.splice(0)
+			this.getDataList()
+		}, 1000 * 5 * 60)
+	},
+	deactivated() {
+		if (this.interval) {
+			clearInterval(this.interval)
+			this.interval = null
+		}
 	},
 	methods: {
 		handleOperations() {},
@@ -250,12 +279,12 @@ export default {
 
 			/** [1] 获取上下片数据 */
 			this.fetchList('sx', startTime, endTime).then(({ data: res }) => {
-				console.log('sx: ', res)
+				// console.log('sx: ', res)
 				this.dataListStatic = res.data || []
 			})
 			/** [2] 获取产线检测类型 */
 			this.fetchList('pl', startTime, endTime).then(({ data: res }) => {
-				console.log('pl: ', res)
+				// console.log('pl: ', res)
 				/** TODO: 解析 nameData */
 				this.parseTableProps(res.data.nameData)
 
@@ -281,7 +310,7 @@ export default {
 
 			this.tableConfigDynamic = [
 				{ type: 'index', width: 100, name: i18n.t('index') },
-				{ name: i18n.t('inspect.type'), prop: 'inspectionContent' },
+				{ name: i18n.t('inspect.det'), prop: 'inspectionContent' },
 				...subProps,
 				{ name: i18n.t('inspect.typetotal'), prop: 'sumInput' },
 				{ name: i18n.t('inspect.rate'), prop: 'scrapRatio', filter: val => (val || val === 0 ? `${val}%` : '-') }

src/views/modules/monitoring/qualityInspectionDet.vue

@@ -1,16 +1,16 @@
 <template>
 	<div class="mod-config">
-		<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+		<el-form :inline="true" :model="dataForm" @keyup.enter.native="currentChangeHandle(1)">
 			<el-form-item>
 				<el-input v-model="dataForm.key" :placeholder="$t('inspect.det')" clearable></el-input>
 			</el-form-item>
 			<el-form-item>
-				<el-button @click="getDataList()">{{ $t('query') }}</el-button>
+				<el-button @click="currentChangeHandle(1)">{{ $t('query') }}</el-button>
 				<el-button v-if="$hasPermission('monitoring:qualityinspectiondet:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
 			</el-form-item>
 		</el-form>
 
-		<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" @operate-event="handleOperations" @refreshDataList="getDataList" />
+		<base-table :page="pageIndex" :size="pageSize" :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" @operate-event="handleOperations" @refreshDataList="getDataList" />
 		<el-pagination
 			@size-change="sizeChangeHandle"
 			@current-change="currentChangeHandle"
@@ -22,7 +22,7 @@
 		>
 		</el-pagination>
 		<!-- 弹窗, 新增 / 修改 -->
-		<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" :configs="addOrUpdateConfigs" @refreshDataList="getDataList" @destory-dialog="addOrUpdateVisible = false" />
+		<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" :configs="addOrUpdateConfigs" @refreshDataList="getDataList" @destory-dialog="handleDestroyDialog" />
 	</div>
 </template>
 
@@ -53,9 +53,9 @@ const addOrUpdateConfigs = {
 	type: 'dialog',
 	infoUrl: '/monitoring/qualityInspectionDet',
 	fields: [
-		{ name: 'typeId', label: i18n.t('inspect.type'), type: 'select', options: [] },
-		{ name: 'content', label: i18n.t('inspect.det') },
-		{ name: 'code', label: i18n.t('inspect.detcode'), api: '/monitoring/qualityInspectionDet/getCode' },
+		{ name: 'typeId', label: i18n.t('inspect.type'), required: true, type: 'select', options: [] },
+		{ name: 'content', label: i18n.t('inspect.det'), required: true },
+		{ name: 'code', label: i18n.t('inspect.code'), api: '/monitoring/qualityInspectionDet/getCode' },
 		'remark'
 	],
 	operations: [
@@ -92,6 +92,12 @@ export default {
 		this.getDataList()
 	},
 	methods: {
+		// destroy dialog
+		handleDestroyDialog() {
+			setTimeout(() => {
+				this.addOrUpdateVisible= false
+			}, /** after dialog animated */ 200);
+		},
 		// 获取产检测类型列表
 		getInspectionTypeList() {
 			this.$http({

src/views/modules/monitoring/qualityInspectionRecord.vue

@@ -1,16 +1,29 @@
 <template>
 	<div class="mod-config">
-		<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
-			<!-- <el-form-item>
-				<el-input v-model="dataForm.key" :placeholder="$t('parameter')" clearable></el-input>
-			</el-form-item> -->
+		<el-form :inline="true" :model="dataForm" @keyup.enter.native="currentChangeHandle(1)">
 			<el-form-item>
-				<el-button @click="getDataList()">{{ $t('query') }}</el-button>
+				<el-select v-model="dataForm.lineId" :placeholder="$t('pl.title')" clearable filterable>
+					<el-option v-for="pl in plList" :key="pl.value" :value="pl.value" :label="pl.label" />
+				</el-select>
+			</el-form-item>
+			<el-form-item>
+				<el-input v-model="dataForm.key" :placeholder="$t('inspect.det')" clearable></el-input>
+			</el-form-item>
+			<el-form-item>
+				<el-button @click="currentChangeHandle(1)">{{ $t('query') }}</el-button>
 				<el-button v-if="$hasPermission('monitoring:qualityinspectionrecord:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
 			</el-form-item>
 		</el-form>
 
-		<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" @operate-event="handleOperations" @refreshDataList="getDataList" />
+		<base-table
+			:page="pageIndex"
+			:size="pageSize"
+			:data="dataList"
+			:table-head-configs="tableConfigs"
+			:max-height="calcMaxHeight(8)"
+			@operate-event="handleOperations"
+			@refreshDataList="getDataList"
+		/>
 
 		<el-pagination
 			@size-change="sizeChangeHandle"
@@ -29,7 +42,7 @@
 			ref="addOrUpdate"
 			:configs="addOrUpdateConfigs"
 			@refreshDataList="getDataList"
-			@destory-dialog="addOrUpdateVisible = false"
+			@destory-dialog="handleDestroyDialog"
 			@select-change="handleSelectChange"
 		/>
 	</div>
@@ -56,8 +69,10 @@ const tableConfigs = [
 		name: i18n.t('inspect.det')
 	},
 	{ prop: 'checkTime', name: i18n.t('inspect.time'), filter: timeFilter },
-	{ prop: 'productionId', name: i18n.t('pl.id') },
-	{ prop: 'sectionId', name: i18n.t('ws.id') },
+	{ prop: 'productionName', name: i18n.t('pl.title') },
+	{ prop: 'sectionName', name: i18n.t('ws.title') },
+	// { prop: 'productionId', name: i18n.t('pl.id') },
+	// { prop: 'sectionId', name: i18n.t('ws.id') },
 	{ prop: 'checkPerson', name: i18n.t('inspect.people') },
 	{ prop: 'source', name: i18n.t('source'), filter: val => ({ 1: i18n.t('manual'), 2: i18n.t('auto') }[val]) },
 	{ prop: 'explainText', name: i18n.t('desc') },
@@ -69,9 +84,9 @@ const addOrUpdateConfigs = {
 	type: 'dialog',
 	infoUrl: '/monitoring/qualityInspectionRecord',
 	fields: [
-		{ name: 'checkTime', label: i18n.t('inspect.time'), type: 'date', props: { style: 'width: 100%', type: 'datetime' }, placeholder: i18n.t('hints.checktime') },
-		{ name: 'productionId', label: i18n.t('pl.title'), type: 'select', options: [] },
-		{ name: 'sectionId', label: i18n.t('ws.title'), type: 'select', options: [] },
+		{ name: 'checkTime', required: true, label: i18n.t('inspect.time'), type: 'date', props: { style: 'width: 100%', type: 'datetime' }, placeholder: i18n.t('hints.checktime') },
+		{ name: 'productionId', required: true, label: i18n.t('pl.title'), type: 'select', options: [] },
+		{ name: 'sectionId', required: true, label: i18n.t('ws.title'), type: 'select', options: [] },
 		{
 			name: 'source',
 			label: i18n.t('source'),
@@ -81,7 +96,7 @@ const addOrUpdateConfigs = {
 				{ value: 2, label: i18n.t('auto') }
 			]
 		},
-		{ name: 'inspectionDetId', label: i18n.t('inspect.det'), type: 'select', options: [] },
+		{ name: 'inspectionDetId', required: true, label: i18n.t('inspect.det'), type: 'select', options: [] },
 		{ name: 'checkPerson', label: i18n.t('inspect.people') },
 		{ name: 'explainText', label: i18n.t('desc') },
 		'remark'
@@ -100,8 +115,10 @@ export default {
 			addOrUpdateConfigs,
 			tableConfigs,
 			dataForm: {
-				key: ''
+				key: '',
+				lineId: ''
 			},
+			plList: [],
 			dataList: [],
 			pageIndex: 1,
 			pageSize: 10,
@@ -122,6 +139,12 @@ export default {
 		this.getProductLines()
 	},
 	methods: {
+		// destroy dialog
+		handleDestroyDialog() {
+			setTimeout(() => {
+				this.addOrUpdateVisible = false
+			}, /** after dialog animated */ 200)
+		},
 		// handle
 		async handleSelectChange({ name, id }) {
 			if (name === 'productionId') {
@@ -150,18 +173,14 @@ export default {
 		// 获取产线
 		getProductLines() {
 			this.$http({
-				url: this.$http.adornUrl('/monitoring/productionLine/page'),
-				method: 'get',
-				params: this.$http.adornParams({
-					// 	page: this.pageIndex,
-					// 	limit: this.pageSize,
-					// 	key: this.dataForm.key
-				})
+				url: this.$http.adornUrl('/monitoring/productionLine/list'),
+				method: 'get'
 			}).then(({ data: res }) => {
 				const plOpt = this.addOrUpdateConfigs.fields.find(item => item.name === 'productionId')
 				if (plOpt) {
-					plOpt.options = res.data.list.map(item => ({ value: item.id, label: item.name })) || []
+					plOpt.options = res.data.map(item => ({ value: item.id, label: item.name })) || []
 				}
+				this.plList = res.data.map(item => ({ value: item.id, label: item.name })) || []
 			})
 		},
 		// 获取工段
@@ -195,14 +214,22 @@ export default {
 		getDataList() {
 			this.addOrUpdateVisible = false
 			this.dataListLoading = true
+
+			const queryParams = {
+				page: this.pageIndex,
+				limit: this.pageSize
+			}
+
+			if (this.dataForm.key) {
+				queryParams['key'] = this.dataForm.key
+			}
+			if (this.dataForm.lineId) {
+				queryParams['lineId'] = this.dataForm.lineId
+			}
 			this.$http({
 				url: this.$http.adornUrl('/monitoring/qualityInspectionRecord/page'),
 				method: 'get',
-				params: this.$http.adornParams({
-					page: this.pageIndex,
-					limit: this.pageSize,
-					key: this.dataForm.key
-				})
+				params: this.$http.adornParams(queryParams)
 			}).then(({ data }) => {
 				if (data && data.code === 0) {
 					this.dataList = data.data.list

src/views/modules/monitoring/qualityInspectionType.vue

@@ -1,16 +1,24 @@
 <template>
 	<div class="mod-config">
-		<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+		<el-form :inline="true" :model="dataForm" @keyup.enter.native="currentChangeHandle(1)">
 			<el-form-item>
 				<el-input v-model="dataForm.key" :placeholder="$t('inspect.typename')" clearable></el-input>
 			</el-form-item>
 			<el-form-item>
-				<el-button @click="getDataList()">{{ $t('query') }}</el-button>
+				<el-button @click="currentChangeHandle(1)">{{ $t('query') }}</el-button>
 				<el-button v-if="$hasPermission('monitoring:qualityinspectiontype:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
 			</el-form-item>
 		</el-form>
 
-		<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" @operate-event="handleOperations" @refreshDataList="getDataList" />
+		<base-table
+			:page="pageIndex"
+			:size="pageSize"
+			:data="dataList"
+			:table-head-configs="tableConfigs"
+			:max-height="calcMaxHeight(8)"
+			@operate-event="handleOperations"
+			@refreshDataList="getDataList"
+		/>
 		<el-pagination
 			@size-change="sizeChangeHandle"
 			@current-change="currentChangeHandle"
@@ -22,7 +30,7 @@
 		>
 		</el-pagination>
 		<!-- 弹窗, 新增 / 修改 -->
-		<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" :configs="addOrUpdateConfigs" @refreshDataList="getDataList" @destory-dialog="addOrUpdateVisible = false" />
+		<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" :configs="addOrUpdateConfigs" @refreshDataList="getDataList" @destory-dialog="handleDestroyDialog" />
 	</div>
 </template>
 
@@ -42,7 +50,7 @@ const tableConfigs = [
 	},
 	{ prop: 'createTime', name: i18n.t('createTime'), filter: timeFilter },
 	{ prop: 'name', name: i18n.t('inspect.typename') },
-	{ prop: 'code', name: i18n.t('inspect.typename') },
+	{ prop: 'code', name: i18n.t('inspect.typecode') },
 	{ prop: 'remark', name: i18n.t('remark') },
 	{ prop: 'operations', name: i18n.t('handle'), fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['edit', 'delete'] }
 ]
@@ -50,7 +58,11 @@ const tableConfigs = [
 const addOrUpdateConfigs = {
 	type: 'dialog',
 	infoUrl: '/monitoring/qualityInspectionType',
-	fields: [{ name: 'name', label: i18n.t('inspect.type') }, { name: 'code', label: i18n.t('inspect.typename'), api: '/monitoring/qualityInspectionType/getCode' }, 'remark'],
+	fields: [
+		{ name: 'name', label: i18n.t('inspect.type'), required: true },
+		{ name: 'code', label: i18n.t('inspect.typecode'), api: '/monitoring/qualityInspectionType/getCode' },
+		'remark'
+	],
 	operations: [
 		{ name: 'cancel', showAlways: true },
 		{ name: 'save', url: '/monitoring/qualityInspectionType', permission: 'monitoring:qualityinspectiontype:save', showOnEdit: false },
@@ -84,6 +96,12 @@ export default {
 		this.getDataList()
 	},
 	methods: {
+		// destroy dialog
+		handleDestroyDialog() {
+			setTimeout(() => {
+				this.addOrUpdateVisible = false
+			}, /** after dialog animated */ 200)
+		},
 		// 获取数据列表
 		getDataList() {
 			this.addOrUpdateVisible = false

src/views/modules/monitoring/realtimeEquipment.vue

@@ -47,6 +47,7 @@ export default {
 		})
 		this.intervalId = setInterval(() => {
 			this.$message({
+				message: this.$t('realtime.refresh'),
 				type: 'warning',
 				duration: 1500,
 				onClose: () => {
@@ -59,7 +60,11 @@ export default {
 			})
 		}, 1000 * 60 * 5)
 	},
-	beforeDestroy() {
+	// beforeDestroy() {
+	// 	console.log('before destroyed...')
+	// 	if (this.intervalId) clearInterval(this.intervalId)
+	// },
+	deactivated() {
 		if (this.intervalId) clearInterval(this.intervalId)
 	},
 	methods: {
@@ -129,7 +134,7 @@ export default {
 											{ prop: obj.recordTime + '-inputNum', label: i18n.t('realtime.in') },
 											{ prop: obj.recordTime + '-outputNum', label: i18n.t('realtime.out') },
 											{ prop: obj.recordTime + '-scrapNum', label: i18n.t('realtime.data') },
-											{ prop: obj.recordTime + '-scrapRate', label: i18n.t('realtime.rate') }
+											{ prop: obj.recordTime + '-scrapRate', label: i18n.t('realtime.rate'), filter: val => (val !== '-' ? `${val.toFixed(2)}%` : '-') }
 										]
 									})
 								}

src/views/modules/monitoring/realtimeProductLine.vue

@@ -47,11 +47,11 @@ export default {
 
 		this.intervalId = setInterval(() => {
 			this.$message({
-				message: this.$t('module.factory.realtime.productLine.refresh'),
+				message: this.$t('realtime.refresh'),
 				type: 'warning',
 				onClose: () => {
 					this.clearData()
-					this.fetchList().then(res => {
+					this.fetchList().then(({ data: res }) => {
 						this.testData = res
 						this.handleData()
 					})
@@ -60,7 +60,7 @@ export default {
 		}, 1000 * 60 * 5)
 	},
 
-	beforeDestroy() {
+	deactivated() {
 		if (this.intervalId) clearInterval(this.intervalId)
 	},
 
@@ -113,9 +113,9 @@ export default {
 								children: [
 									{ prop: obj.recordTime + '-inputNum', label: i18n.t('realtime.in') },
 									{ prop: obj.recordTime + '-outputNum', label: i18n.t('realtime.out') },
-									{ prop: obj.recordTime + '-passArea', label: i18n.t('realtime.goodrate') },
-									{ prop: obj.recordTime + '-scrapNum', label: i18n.t('realtime.num') },
-									{ prop: obj.recordTime + '-scrapRate', label: i18n.t('realtime.rate') }
+									// { prop: obj.recordTime + '-passArea', label: i18n.t('realtime.goodrate') },
+									// { prop: obj.recordTime + '-scrapNum', label: i18n.t('realtime.num') },
+									// { prop: obj.recordTime + '-scrapRate', label: i18n.t('realtime.rate') }
 								]
 							})
 						}

src/views/modules/monitoring/realtimeQualityInspection.vue

@@ -43,15 +43,21 @@ export default {
 		})
 
 		this.intervalId = setInterval(() => {
-			this.clearData()
-			this.fetchList().then(res => {
-				this.testData = res
-				this.handleData()
+			this.$message({
+				message: this.$t('realtime.refresh'),
+				type: 'warning',
+				onClose: () => {
+					this.clearData()
+					this.fetchList().then(({ data: res }) => {
+						this.testData = res
+						this.handleData()
+					})
+				}
 			})
 		}, 1000 * 60 * 5)
 	},
 
-	beforeDestroy() {
+	deactivated() {
 		if (this.intervalId) clearInterval(this.intervalId)
 	},
 
@@ -131,7 +137,8 @@ export default {
 
 			// 保存为 props
 			for (const key of sortedTime) {
-				const prop = { label: key, children: [] }
+				// const prop = { label: key, children: [] }
+				const prop = { label: moment(key).format('YYYY-MM-DD HH:mm:ss'), children: [] }
 				for (const subKey in timeMap[key]) {
 					prop.children.push({ label: subKey, prop: key + subKey })
 				}

src/views/modules/monitoring/reportCategory.vue

@@ -1,16 +1,16 @@
 <template>
 	<div class="mod-config">
-		<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+		<el-form :inline="true" :model="dataForm" @keyup.enter.native="currentChangeHandle(1)">
 			<el-form-item>
 				<el-input v-model="dataForm.name" :placeholder="$t('categoryName')" clearable></el-input>
 			</el-form-item>
 			<el-form-item>
-				<el-button @click="getDataList()">{{ $t('query') }}</el-button>
+				<el-button @click="currentChangeHandle(1)">{{ $t('query') }}</el-button>
 				<el-button v-if="$hasPermission('monitoring:reportsheetcategory:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
 			</el-form-item>
 		</el-form>
 
-		<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" @operate-event="handleOperations" @refreshDataList="getDataList" />
+		<base-table :page="pageIndex" :size="pageSize" :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" @operate-event="handleOperations" @refreshDataList="getDataList" />
 
 		<el-pagination
 			@size-change="sizeChangeHandle"
@@ -23,7 +23,7 @@
 		>
 		</el-pagination>
 		<!-- 弹窗, 新增 / 修改 -->
-		<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" :configs="addOrUpdateConfigs" @refreshDataList="getDataList" @destory-dialog="addOrUpdateVisible = false" />
+		<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" :configs="addOrUpdateConfigs" @refreshDataList="getDataList" @destory-dialog="handleDestroyDialog" />
 	</div>
 </template>
 
@@ -83,6 +83,12 @@ export default {
 		this.getDataList()
 	},
 	methods: {
+		// destroy dialog
+		handleDestroyDialog() {
+			setTimeout(() => {
+				this.addOrUpdateVisible= false
+			}, /** after dialog animated */ 200);
+		},
 		handleOperations({ type, data: id }) {
 			switch (type) {
 				case 'edit':

src/views/modules/monitoring/reportDesign.vue

@@ -13,7 +13,8 @@ export default {
 			// url: process.env.VUE_APP_REPORT_DESIGN_URL
 			// url: window.SITE_CONFIG['apiURL'] + this.$http.adornUrl('/ureport/designer')
 			// url: this.$http.adornUrl('/ureport/designer')
-			url: (process.env.NODE_ENV === 'production' ? '/api' : '/yd-monitor') + '/ureport/designer'
+			// url: (process.env.NODE_ENV === 'production' ? '/api' : '/yd-monitor') + '/ureport/designer'
+			url: '/api/ureport/designer'
 		}
 	},
 	mounted() {

src/views/modules/monitoring/reportDetail.vue

@@ -1,17 +1,17 @@
 <template>
 	<div class="mod-config">
-		<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+		<el-form :inline="true" :model="dataForm" @keyup.enter.native="currentChangeHandle(1)">
 			<el-form-item>
 				<el-input v-model="dataForm.name" :placeholder="$t('report.name')" clearable></el-input>
 			</el-form-item>
 			<el-form-item>
-				<el-button @click="getDataList()">{{ $t('query') }}</el-button>
+				<el-button @click="currentChangeHandle(1)">{{ $t('query') }}</el-button>
 				<!-- <el-button v-if="$hasPermission('')" type="primary" @click="addOrUpdateHandle()">新增(跳到设计)</el-button> -->
 				<el-button v-if="$hasPermission('monitoring:reportsheet:save')" type="primary" @click="handleAdd()">{{ $t('add') }}</el-button>
 			</el-form-item>
 		</el-form>
 
-		<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="500" @operate-event="handleOperations" @refreshDataList="getDataList" />
+		<base-table :page="pageIndex" :size="pageSize" :data="dataList" :table-head-configs="tableConfigs" :max-height="500" @operate-event="handleOperations" @refreshDataList="getDataList" />
 
 		<el-pagination
 			@size-change="sizeChangeHandle"
@@ -24,7 +24,7 @@
 		>
 		</el-pagination>
 		<!-- 弹窗, 新增 / 修改 -->
-		<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" :configs="addOrUpdateConfigs" @refreshDataList="getDataList" @destory-dialog="addOrUpdateVisible = false" />
+		<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" :configs="addOrUpdateConfigs" @refreshDataList="getDataList" @destory-dialog="handleDestroyDialog" />
 	</div>
 </template>
 
@@ -55,6 +55,12 @@ const CategoryList = {
 		this.pickedId = this.injectData[this.injectData.head.prop]
 	},
 	methods: {
+		// destroy dialog
+		handleDestroyDialog() {
+			setTimeout(() => {
+				this.addOrUpdateVisible= false
+			}, /** after dialog animated */ 200);
+		},
 		handleChange(id) {
 			this.pickedId = id
 			this.$emit('emit-data', {
@@ -112,6 +118,12 @@ export default {
 	},
 	computed: {},
 	methods: {
+		// destroy dialog
+		handleDestroyDialog() {
+			setTimeout(() => {
+				this.addOrUpdateVisible= false
+			}, /** after dialog animated */ 200);
+		},
 		getAllCategories() {
 			axios.get(axios.adornUrl('/monitoring/reportSheetCategory/page')).then(({ data: res }) => {
 				if (res.data && res.data.list) {
@@ -125,7 +137,7 @@ export default {
 							prop: 'operations',
 							name: i18n.t('handle'),
 							fixed: 'right',
-							width: 180,
+							// width: 180,
 							subcomponent: TableOperateComponent,
 							options: [{ name: 'preview', emitField: 'fileName' }, { name: 'design', emitField: 'name' }, 'edit', 'delete']
 						}

src/views/modules/monitoring/reportPreview.vue

@@ -23,7 +23,8 @@ export default {
 			loading: true,
 			// url: process.env.VUE_APP_REPORT_VIEW_URL
 			// url: window.SITE_CONFIG['apiURL'] + this.$http.adornUrl('/ureport/preview')
-			url: (process.env.NODE_ENV === 'production' ? '/api' : '/yd-monitor') + '/ureport/preview'
+			// url: (process.env.NODE_ENV === 'production' ? '/api' : '/yd-monitor') + '/ureport/preview'
+			url: '/api/ureport/preview'
 		}
 	},
 	mounted() {

src/views/modules/monitoring/reportSheet.vue

@@ -1,11 +1,11 @@
 <template>
 	<div class="mod-config">
-		<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+		<el-form :inline="true" :model="dataForm" @keyup.enter.native="currentChangeHandle(1)">
 			<el-form-item>
 				<el-input v-model="dataForm.key" :placeholder="$t('parameter')" clearable></el-input>
 			</el-form-item>
 			<el-form-item>
-				<el-button @click="getDataList()">{{ $t('query') }}</el-button>
+				<el-button @click="currentChangeHandle(1)">{{ $t('query') }}</el-button>
 				<el-button v-if="$hasPermission('monitoring:reporsheet:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
 			</el-form-item>
 		</el-form>
@@ -73,6 +73,12 @@ export default {
 		this.getDataList()
 	},
 	methods: {
+		// destroy dialog
+		handleDestroyDialog() {
+			setTimeout(() => {
+				this.addOrUpdateVisible= false
+			}, /** after dialog animated */ 200);
+		},
 		// 获取数据列表
 		getDataList() {
 			this.dataListLoading = true

src/views/modules/monitoring/reportSheetCategory.vue

@@ -1,16 +1,16 @@
 <template>
 	<div class="mod-config">
-		<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+		<el-form :inline="true" :model="dataForm" @keyup.enter.native="currentChangeHandle(1)">
 			<el-form-item>
 				<el-input v-model="dataForm.key" :placeholder="$t('parameter')" clearable></el-input>
 			</el-form-item>
 			<el-form-item>
-				<el-button @click="getDataList()">{{ $t('query') }}</el-button>
+				<el-button @click="currentChangeHandle(1)">{{ $t('query') }}</el-button>
 				<el-button v-if="$hasPermission('monitoring:reporsheecategory:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
 			</el-form-item>
 		</el-form>
 
-		<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" />
+		<base-table :page="pageIndex" :size="pageSize" :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" />
 		<el-pagination
 			@size-change="sizeChangeHandle"
 			@current-change="currentChangeHandle"
@@ -67,6 +67,12 @@ export default {
 		this.getDataList()
 	},
 	methods: {
+		// destroy dialog
+		handleDestroyDialog() {
+			setTimeout(() => {
+				this.addOrUpdateVisible= false
+			}, /** after dialog animated */ 200);
+		},
 		// 获取数据列表
 		getDataList() {
 			this.dataListLoading = true

src/views/modules/monitoring/sysfile.vue

@@ -10,7 +10,7 @@
 			</el-form-item>
 		</el-form>
 
-		<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" />
+		<base-table :page="pageIndex" :size="pageSize" :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" />
 		<el-pagination
 			@size-change="sizeChangeHandle"
 			@current-change="currentChangeHandle"
@@ -78,6 +78,12 @@ export default {
 		this.getDataList()
 	},
 	methods: {
+		// destroy dialog
+		handleDestroyDialog() {
+			setTimeout(() => {
+				this.addOrUpdateVisible= false
+			}, /** after dialog animated */ 200);
+		},
 		// 获取数据列表
 		getDataList() {
 			this.dataListLoading = true

src/views/modules/monitoring/sysfileType.vue

@@ -10,7 +10,7 @@
 			</el-form-item>
 		</el-form>
 
-		<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" />
+		<base-table :page="pageIndex" :size="pageSize" :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" />
 		<el-pagination
 			@size-change="sizeChangeHandle"
 			@current-change="currentChangeHandle"
@@ -75,6 +75,12 @@ export default {
 		this.getDataList()
 	},
 	methods: {
+		// destroy dialog
+		handleDestroyDialog() {
+			setTimeout(() => {
+				this.addOrUpdateVisible= false
+			}, /** after dialog animated */ 200);
+		},
 		// 获取数据列表
 		getDataList() {
 			this.dataListLoading = true

src/views/modules/monitoring/workShopSection.vue

@@ -1,16 +1,24 @@
 <template>
 	<div class="mod-config">
-		<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+		<el-form :inline="true" :model="dataForm" @keyup.enter.native="currentChangeHandle(1)">
 			<el-form-item>
 				<el-input v-model="dataForm.key" :placeholder="$t('ws.name')" clearable></el-input>
 			</el-form-item>
 			<el-form-item>
-				<el-button @click="getDataList()">{{ $t('query') }}</el-button>
+				<el-button @click="currentChangeHandle(1)">{{ $t('query') }}</el-button>
 				<el-button v-if="$hasPermission('monitoring:workshopsection:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
 			</el-form-item>
 		</el-form>
 
-		<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" @operate-event="handleOperations" @refreshDataList="getDataList" />
+		<base-table
+			:page="pageIndex"
+			:size="pageSize"
+			:data="dataList"
+			:table-head-configs="tableConfigs"
+			:max-height="calcMaxHeight(8)"
+			@operate-event="handleOperations"
+			@refreshDataList="getDataList"
+		/>
 		<el-pagination
 			@size-change="sizeChangeHandle"
 			@current-change="currentChangeHandle"
@@ -22,7 +30,7 @@
 		>
 		</el-pagination>
 		<!-- 弹窗, 新增 / 修改 -->
-		<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList" @destory-dialog="addOrUpdateVisible = false" />
+		<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList" @destory-dialog="handleDestroyDialog" />
 	</div>
 </template>
 
@@ -45,6 +53,7 @@ const tableConfigs = [
 	{ prop: 'name', name: i18n.t('ws.name') },
 	{ prop: 'code', name: i18n.t('ws.code') },
 	{ prop: 'productionLineName', name: i18n.t('pl.title') },
+	{ prop: 'description', name: i18n.t('desc') },
 	{ prop: 'remark', name: i18n.t('remark') },
 	{ prop: 'operations', name: i18n.t('handle'), fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['edit', 'delete'] }
 ]
@@ -53,8 +62,8 @@ const addOrUpdateConfigs = {
 	type: 'dialog',
 	infoUrl: '/monitoring/workshopSection',
 	fields: [
-		{ name: 'name', label: i18n.t('ws.name') },
-		{ name: 'code', label: i18n.t('ws.code'), api: '/monitoring/workshopSection/getCode' },
+		{ name: 'name', required: true, label: i18n.t('ws.name') },
+		{ name: 'code', required: true, label: i18n.t('ws.code'), api: '/monitoring/workshopSection/getCode' },
 		{ name: 'productionLineId', label: i18n.t('ws.belong'), type: 'select', options: [] },
 		'description',
 		'remark'
@@ -95,6 +104,12 @@ export default {
 		this.getDataList()
 	},
 	methods: {
+		// destroy dialog
+		handleDestroyDialog() {
+			setTimeout(() => {
+				this.addOrUpdateVisible = false
+			}, /** after dialog animated */ 200)
+		},
 		// 获取产线列表
 		getProductLine() {
 			this.$http.get(this.$http.adornUrl('/monitoring/productionLine/list')).then(({ data: res }) => {
@@ -123,12 +138,13 @@ export default {
 					key: this.dataForm.key
 				})
 			}).then(({ data }) => {
-				if (data && data.code === 0) {
+				if (data && data.code === 0 && data.data?.list?.length > 0) {
 					this.dataList = data.data.list
 					this.totalPage = data.data.total
 				} else {
 					this.dataList = []
 					this.totalPage = 0
+					this.pageIndex = 1
 				}
 				this.dataListLoading = false
 			})

src/views/modules/monitoring/workShopSectionEquipment.vue

@@ -1,16 +1,16 @@
 <template>
 	<div class="mod-config">
-		<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+		<el-form :inline="true" :model="dataForm" @keyup.enter.native="currentChangeHandle(1)">
 			<el-form-item>
 				<el-input v-model="dataForm.key" :placeholder="$t('parameter')" clearable></el-input>
 			</el-form-item>
 			<el-form-item>
-				<el-button @click="getDataList()">{{ $t('query') }}</el-button>
+				<el-button @click="currentChangeHandle(1)">{{ $t('query') }}</el-button>
 				<el-button v-if="$hasPermission('monitoring:workshopsectionequipment:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
 			</el-form-item>
 		</el-form>
 
-		<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" />
+		<base-table :page="pageIndex" :size="pageSize" :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" />
 		<el-pagination
 			@size-change="sizeChangeHandle"
 			@current-change="currentChangeHandle"
@@ -68,6 +68,12 @@ export default {
 		this.getDataList()
 	},
 	methods: {
+		// destroy dialog
+		handleDestroyDialog() {
+			setTimeout(() => {
+				this.addOrUpdateVisible= false
+			}, /** after dialog animated */ 200);
+		},
 		// 获取数据列表
 		getDataList() {
 			this.dataListLoading = true

src/views/modules/monitoring/workshopSectionDialog.vue

@@ -1,5 +1,11 @@
 <template>
-	<el-dialog class="super-flexible-dialog" :title="isDetail ? $t('ws.detail') : !dataForm.id ? $t('add') : $t('ws.edit')" :visible.sync="visible">
+	<el-dialog
+		class="super-flexible-dialog"
+		:title="isDetail ? $t('ws.detail') : !dataForm.id ? $t('add') : $t('edit')"
+		:visible.sync="visible"
+		:close-on-click-modal="false"
+		:destroy-on-close="true"
+	>
 		<div style="max-height: 60vh; overflow-y: scroll; overflow-x: hidden;">
 			<el-form ref="dataForm" :model="dataForm" :rules="dataFormRules">
 				<el-row :gutter="20">
@@ -33,10 +39,18 @@
 			<section class="attr-form-section" v-if="dataForm.id">
 				<h3>
 					{{ $t('ws.eqbind') }}
-					<el-button type="text" v-if="!showAttrForm" @click="addEq">{{ $t('add') }}</el-button>
+					<!-- <el-button type="text" v-if="!showAttrForm" @click="addEq">{{ $t('add') }}</el-button> -->
 				</h3>
 				<div class="table" v-if="!showAttrForm">
-					<base-table :data="eqList" :table-head-configs="tableProps" :max-height="calcMaxHeight(8)" @operate-event="handleOperations" @refreshDataList="getDataList" />
+					<base-table
+						:page="page"
+						:size="limit"
+						:data="eqList"
+						:table-head-configs="tableProps"
+						:max-height="calcMaxHeight(8)"
+						@operate-event="handleOperations"
+						@refreshDataList="getDataList"
+					/>
 					<el-pagination
 						@size-change="sizeChangeHandle"
 						@current-change="currentChangeHandle"
@@ -62,8 +76,8 @@
 import i18n from '@/i18n'
 import BaseTable from '@/components/base-table'
 import SmallTitle from '@/components/small-title'
-import { pick } from 'lodash/object'
-import TableOperateComponent from '@/components/base-table/components/operationComponent'
+// import { pick } from 'lodash/object'
+// import TableOperateComponent from '@/components/base-table/components/operationComponent'
 import AttrForm from './workshopSectionDialogAttrForm.vue'
 import { calcMaxHeight } from '@/utils'
 const tableProps = [
@@ -72,15 +86,15 @@ const tableProps = [
 		name: i18n.t('index')
 	},
 	{ name: i18n.t('eq.name'), prop: 'equipmentName' },
-	{ name: i18n.t('dept.sort'), prop: 'sort' },
-	{
-		name: i18n.t('handle'),
-		prop: 'operations',
-		fixed: 'right',
-		width: 180,
-		subcomponent: TableOperateComponent,
-		options: ['edit', 'delete']
-	}
+	{ name: i18n.t('dept.sort'), prop: 'sort' }
+	// {
+	// 	name: i18n.t('handle'),
+	// 	prop: 'operations',
+	// 	fixed: 'right',
+	// 	width: 180,
+	// 	subcomponent: TableOperateComponent,
+	// 	options: ['edit', 'delete']
+	// }
 ]
 
 export default {
@@ -108,9 +122,12 @@ export default {
 				// 备注
 				remark: ''
 			},
+			dataFormRules: {
+				name: [{ required: true, message: i18n.t('validate.required'), trigger: 'blur' }],
+				code: [{ required: true, message: i18n.t('validate.required'), trigger: 'blur' }]
+			},
 			limit: 5,
 			page: 1,
-			dataFormRules: {},
 			showAttrForm: false
 		}
 	},
@@ -273,20 +290,24 @@ export default {
 			}
 		},
 		handleCreateOrUpdate() {
-			this.$http({
-				url: this.$http.adornUrl('/monitoring/workshopSection'),
-				method: this.dataForm.id ? 'put' : 'post',
-				data: {
-					...this.dataForm
+			this.$refs['dataForm'].validate(valid => {
+				if (valid) {
+					this.$http({
+						url: this.$http.adornUrl('/monitoring/workshopSection'),
+						method: this.dataForm.id ? 'put' : 'post',
+						data: {
+							...this.dataForm
+						}
+					}).then(({ data: res }) => {
+						this.$message.success({
+							message: i18n.t('prompt.success'),
+							onClose: () => {
+								this.$emit('refreshDataList')
+								this.visible = false
+							}
+						})
+					})
 				}
-			}).then(({ data: res }) => {
-				this.$message.success({
-					message: i18n.t('prompt.success'),
-					onClose: () => {
-						this.$emit('refreshDataList')
-						this.visible = false
-					}
-				})
 			})
 		}
 	}

src/views/modules/monitoring/workshopSectionDialogAttrForm.vue

@@ -5,7 +5,7 @@
 				<el-row :gutter="20">
 					<el-col :span="12">
 						<el-form-item :label="edit ? $t('ws.binded') : $t('ws.unbind')" prop="equipmentId">
-							<el-select v-if="!edit" clearable v-model="dataForm.equipmentId">
+							<el-select v-if="!edit" clearable v-model="dataForm.equipmentId" :placeholder="$t('ws.eqbindplaceholder')">
 								<el-option v-for="eq in eqList" :key="eq.id" :label="eq.name" :value="eq.id" />
 							</el-select>
 							<el-input v-else disabled v-model="bindedEquipmentName" /> </el-form-item

src/views/modules/oss/oss-config.vue

@@ -152,6 +152,12 @@ export default {
 		}
 	},
 	methods: {
+		// destroy dialog
+		handleDestroyDialog() {
+			setTimeout(() => {
+				this.addOrUpdateVisible= false
+			}, /** after dialog animated */ 200);
+		},
 		init() {
 			this.visible = true
 			this.$nextTick(() => {

src/views/modules/oss/oss-upload.vue

@@ -20,10 +20,17 @@ export default {
 		}
 	},
 	methods: {
+		// destroy dialog
+		handleDestroyDialog() {
+			setTimeout(() => {
+				this.addOrUpdateVisible= false
+			}, /** after dialog animated */ 200);
+		},
 		init() {
 			this.visible = true
 			// this.url = `${window.SITE_CONFIG['apiURL']}/sys/oss/upload?token=${Cookies.get('token')}`
-			this.url = (process.env.NODE_ENV === 'production' ? '/api' : '/yd-monitor') + `/sys/oss/upload?token=${Cookies.get('token')}`
+			// this.url = (process.env.NODE_ENV === 'production' ? '/api' : '/yd-monitor') + `/sys/oss/upload?token=${Cookies.get('token')}`
+			this.url = `/api/sys/oss/upload?token=${Cookies.get('token')}`
 			this.num = 0
 			this.fileList = []
 		},

src/views/modules/oss/oss.vue

@@ -64,6 +64,12 @@ export default {
 		Upload
 	},
 	methods: {
+		// destroy dialog
+		handleDestroyDialog() {
+			setTimeout(() => {
+				this.addOrUpdateVisible= false
+			}, /** after dialog animated */ 200);
+		},
 		// 云存储配置
 		configHandle() {
 			this.configVisible = true

src/views/modules/sys/dept-add-or-update.vue

@@ -65,6 +65,12 @@ export default {
 		}
 	},
 	methods: {
+		// destroy dialog
+		handleDestroyDialog() {
+			setTimeout(() => {
+				this.addOrUpdateVisible= false
+			}, /** after dialog animated */ 200);
+		},
 		init() {
 			this.visible = true
 			this.$nextTick(() => {

src/views/modules/sys/dict-data-add-or-update.vue

@@ -47,6 +47,12 @@ export default {
 		}
 	},
 	methods: {
+		// destroy dialog
+		handleDestroyDialog() {
+			setTimeout(() => {
+				this.addOrUpdateVisible= false
+			}, /** after dialog animated */ 200);
+		},
 		init() {
 			this.visible = true
 			this.$nextTick(() => {

src/views/modules/sys/dict-data.vue

@@ -77,6 +77,12 @@ export default {
 		this.getDataList()
 	},
 	methods: {
+		// destroy dialog
+		handleDestroyDialog() {
+			setTimeout(() => {
+				this.addOrUpdateVisible= false
+			}, /** after dialog animated */ 200);
+		},
 		// 新增 / 修改
 		addOrUpdateHandle(id) {
 			this.addOrUpdateVisible = true

src/views/modules/sys/dict-type-add-or-update.vue

@@ -46,6 +46,12 @@ export default {
 		}
 	},
 	methods: {
+		// destroy dialog
+		handleDestroyDialog() {
+			setTimeout(() => {
+				this.addOrUpdateVisible= false
+			}, /** after dialog animated */ 200);
+		},
 		init() {
 			this.visible = true
 			this.$nextTick(() => {

src/views/modules/sys/dict-type.vue

@@ -24,16 +24,18 @@
 			<el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" @sort-change="dataListSortChangeHandle" style="width: 100%;">
 				<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
 				<el-table-column prop="dictName" :label="$t('dict.dictName')" header-align="center" align="center"></el-table-column>
-				<el-table-column prop="dictType" :label="$t('dict.dictType')" header-align="center" align="center">
+				<el-table-column prop="dictType" :label="$t('dict.dictType')" header-align="center" align="center"></el-table-column>
+				<!-- <el-table-column prop="dictType" :label="$t('dict.dictType')" header-align="center" align="center">
 					<template slot-scope="scope">
 						<el-button type="text" @click="childHandle(scope.row)">{{ scope.row.dictType }}</el-button>
 					</template>
-				</el-table-column>
+				</el-table-column> -->
 				<el-table-column prop="sort" :label="$t('dict.sort')" sortable="custom" header-align="center" align="center"></el-table-column>
 				<el-table-column prop="remark" :label="$t('dict.remark')" header-align="center" align="center"></el-table-column>
 				<el-table-column prop="createDate" :label="$t('dict.createDate')" sortable="custom" header-align="center" align="center" width="180"></el-table-column>
-				<el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
+				<el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="240">
 					<template slot-scope="scope">
+						<el-button type="text" size="small" @click="childHandle(scope.row)">{{ $t('dictValueList') }}</el-button>
 						<el-button v-if="$hasPermission('sys:dict:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>
 						<el-button v-if="$hasPermission('sys:dict:delete')" type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
 					</template>
@@ -85,6 +87,12 @@ export default {
 		IconsDialog
 	},
 	methods: {
+		// destroy dialog
+		handleDestroyDialog() {
+			setTimeout(() => {
+				this.addOrUpdateVisible= false
+			}, /** after dialog animated */ 200);
+		},
 		//
 		showIcons() {
 			this.displayIcon = true

src/views/modules/sys/log-error.vue

@@ -54,6 +54,12 @@ export default {
 		}
 	},
 	methods: {
+		// destroy dialog
+		handleDestroyDialog() {
+			setTimeout(() => {
+				this.addOrUpdateVisible= false
+			}, /** after dialog animated */ 200);
+		},
 		// 异常信息
 		infoHandle(info) {
 			this.$alert(info, this.$t('logError.errorInfo'), {

src/views/modules/sys/menu-add-or-update.vue

@@ -95,6 +95,12 @@ export default {
 		}
 	},
 	methods: {
+		// destroy dialog
+		handleDestroyDialog() {
+			setTimeout(() => {
+				this.addOrUpdateVisible= false
+			}, /** after dialog animated */ 200);
+		},
 		init() {
 			this.visible = true
 			this.$nextTick(() => {

src/views/modules/sys/params-add-or-update.vue

@@ -41,6 +41,12 @@ export default {
 		}
 	},
 	methods: {
+		// destroy dialog
+		handleDestroyDialog() {
+			setTimeout(() => {
+				this.addOrUpdateVisible= false
+			}, /** after dialog animated */ 200);
+		},
 		init() {
 			this.visible = true
 			this.$nextTick(() => {

src/views/modules/sys/role-add-or-update.vue

@@ -52,6 +52,12 @@ export default {
 		}
 	},
 	methods: {
+		// destroy dialog
+		handleDestroyDialog() {
+			setTimeout(() => {
+				this.addOrUpdateVisible= false
+			}, /** after dialog animated */ 200);
+		},
 		init() {
 			this.visible = true
 			this.$nextTick(() => {

src/views/modules/sys/user-add-or-update.vue

@@ -111,6 +111,12 @@ export default {
 		}
 	},
 	methods: {
+		// destroy dialog
+		handleDestroyDialog() {
+			setTimeout(() => {
+				this.addOrUpdateVisible= false
+			}, /** after dialog animated */ 200);
+		},
 		init() {
 			this.visible = true
 			this.dataForm.deptId = ''

src/views/pages/login.vue

@@ -93,9 +93,9 @@ export default {
 					this.$root.$i18n.locale = 'zh-CN'
 					// location.reload()
 					break
-					case 'en':
-						this.$root.$i18n.locale = 'en'
-						location.reload()
+				case 'en':
+					this.$root.$i18n.locale = 'en'
+					location.reload()
 					break
 			}
 		},
@@ -103,7 +103,8 @@ export default {
 		getCaptcha() {
 			this.dataForm.uuid = getUUID()
 			// this.captchaPath = `${window.SITE_CONFIG['apiURL']}/captcha?uuid=${this.dataForm.uuid}`
-			this.captchaPath = (process.env.NODE_ENV === 'production' ? '/api' : '/yd-monitor') + `/captcha?uuid=${this.dataForm.uuid}`
+			// this.captchaPath = (process.env.NODE_ENV === 'production' ? '/api' : '/yd-monitor') + `/captcha?uuid=${this.dataForm.uuid}`
+			this.captchaPath = `/api/captcha?uuid=${this.dataForm.uuid}`
 		},
 		// 表单提交
 		dataFormSubmitHandle: debounce(

vue.config.js

@@ -32,7 +32,7 @@ module.exports = {
         target: 'http://india.mes.picaiba.com/'
       },
       '/yd-monitor': {
-        target: 'http://192.168.1.20:8080/' // 开发地址
+        target: 'http://192.168.1.18:8080/' // 开发地址
       },
       '/ureport': {
         target: 'http://india.mes.picaiba.com/' // ureporter