'update'

Reviewed-on: #10

.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

.prettierrc

@@ -0,0 +1,12 @@
+{
+	"singleQuote": true,
+	"tabWidth": 2,
+	"bracketSameLine": true,
+	"jsxBracketSameLine": true,
+	"embeddedLanguageFormatting": "auto",
+	"printWidth": 180,
+	"quoteProps": "consistent",
+	"trailingComma": "none",
+	"semi": false,
+	"useTabs": true
+}

AddOrUpdateConfig.md

@@ -0,0 +1,244 @@
+# Add Or Update Dialog Configs
+
+> 通过传入合理的配置项来使用 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
+const addOrUpdateConfigs = {
+	type: 'dialog', // dialog | drawer | page
+	infoUrl: '/monitoring/product',
+	fields: [
+		'name',
+		{
+			name: 'code',
+			api: '/monitoring/product/getCode'
+		},
+		{
+			name: 'processTime',
+			label: '加工时间',
+			placeholder: '请输入加工时间',
+			type: 'number', // type: number(input+number) | default(input) | textarea | select(options在父组件里获取) | datetime
+			required: true,
+			rules: [
+				// 除了required之外的验证规则
+				{
+					type: 'number',
+					trigger: 'blur',
+					transform: val => Number(val),
+					message: '必须输入数字'
+				}
+			]
+		},
+		'remark',
+		'specifications',
+		{
+			name: 'typeDictValue',
+			rules: [{ required: true, trigger: 'blur' }],
+			label: '产品类型', // 对于非常见属性，最好自己指定label
+			type: 'select',
+			options: [
+				// 动态获取
+			]
+		},
+		{
+			name: 'unitDictValue',
+			label: '单位',
+			type: 'select',
+			placeholder: '请选择单位',
+			options: [
+				// 动态获取
+			]
+		}
+	],
+	operations: [
+		// { name: 'reset', url: true },
+		{ name: 'cancel', url: true, showAlways: true },
+		{ name: 'save', url: '/monitoring/product', permission: '', showOnEdit: false },
+		{ name: 'update', url: '/monitoring/product', permission: '', showOnEdit: true }
+	],
+	subtable: {
+		// for i18n
+		title: '动态属性',
+		url: '/monitoring/productArrt',
+		tableConfigs: [
+			{ type: 'index', name: '序号' },
+			{ prop: 'createTime', name: '添加时间', filter: val => (val ? moment(val).format('YYYY-MM-DD hh:mm:ss') : '-') },
+			{ prop: 'name', name: '属性名', formField: true, rules: [{ required: true, message: '必填', trigger: 'blur' }] },
+			{ prop: 'code', name: '属性值', formField: true },
+			{ prop: 'operations', name: '操作', fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['edit', 'delete'] }
+		]
+	},
+	extraComponents: [
+		{
+			name: 'CompName',
+			label: 'markdown编辑器',
+			component: () => import('xx.vue')
+		}
+	]
+}
+```
+
+## 配置项解释
+
+<br>
+
+### type
+
+类型: string
+值：dialog | drawer | page
+含义：对话框、抽屉、新页面
+
+### infoUrl
+
+类型：string
+含义：详情的接口，如 `/monitoring/product`
+
+### fields
+
+含义：设置新增、编辑时的字段
+类型：`Array<string | object>`
+
+- 当类型为 string 时，默认渲染 `<input>`
+- 当类型为 object 时，有如下选项：
+  - name: 字段名
+  - label: 字段的 label
+  - api: 如果设置了该属性，则该字段会自动从服务器获取值，一般为 code 字段需要
+  - placeholder
+  - type: 渲染何种类型的组件，默认值: 'input'
+  - options: 当上一条 type 值为 'select' 时，需要自行动态获取并加载 options 列表
+  - required: 是否是必须填写的字段（或可用过 rules 做更加具体的设定，设定方式参考 async-validator ）
+  - rules: 验证规则数组，如果只有"必填"的需求，可直接用上一条
+
+### operations
+
+含义：设置对话框等组件里，需要哪些按钮
+类型：`Array<object>`
+属性：
+
+- name，按钮的类型，决定按钮的文字和颜色
+- url，按钮操作的接口地址，不需要的可以给 null 或 true
+- permission，该操作需要的权限，如 "sys:xxx:add" 形式
+- showOnEdit: boolean，是否编辑页面展示，不设置则始终展示
+  示例:
+
+```js
+	operations: [
+		{ name: 'reset', url: true },
+		{ name: 'cancel', url: true, showAlways: true },
+		{ name: 'save', url: '/monitoring/product', permission: '', showOnEdit: false },
+		{ name: 'update', url: '/monitoring/product', permission: '', showOnEdit: true }
+	],
+```
+
+### subtable
+
+含义：有些对话框里需要额外的表格来展示更深层次的数据，如“产品属性”
+类型：object
+选项：
+
+- title, 内嵌表格的标题
+- url, 内嵌表格的数据地址
+- tableConfigs，内嵌表格的配置选项
+  - 类型：`Array<object>`
+  - 配置：
+    - type: 同 element-ui 的 table 属性的 type
+    - fixed: 同 element-ui 的 table 属性的 fixed
+    - width: 同 element-ui 的 table 属性的 width
+    - name: 表头显示的内容
+    - filter: 一般用于转换时间
+    - prop: 字段
+    - formField: boolean, 是否用于表单的填写
+    - rules: 表单验证规则，详见：async-validator
+    - subcomponent: 同 base-table 的 subcomponent
+    - options: 表格操作列需要哪些操作
+      - 值：`edit` | `delete` | `detail`，需要其他可自行添加（修改 base-table 组件）
+
+### extraComponents
+
+含义: 需要在对话框里使用的自定义组件列表
+类型: Array<object>
+对象选项：
+
+- 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

TODO.md

@@ -0,0 +1,7 @@
+# TODO List 
+
+1. 按钮加权限
+2. 国际化
+3. 表格高度 √
+4. 表格时间格式修改 √
+5. icon列表 √

package-lock.json

@@ -2603,6 +2603,12 @@
       "resolved": "https://registry.npm.taobao.org/@types/json-schema/download/@types/json-schema-7.0.5.tgz",
       "integrity": "sha1-3M5EMOZLRDuolF8CkPtWStW6xt0="
     },
+    "@types/lodash": {
+      "version": "4.14.182",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.182.tgz",
+      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==",
+      "dev": true
+    },
     "@types/minimatch": {
       "version": "3.0.3",
       "resolved": "https://registry.npm.taobao.org/@types/minimatch/download/@types/minimatch-3.0.3.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40types%2Fminimatch%2Fdownload%2F%40types%2Fminimatch-3.0.3.tgz",
@@ -5277,6 +5283,19 @@
         "safe-buffer": "^5.0.1"
       }
     },
+    "ckeditor4-integrations-common": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/ckeditor4-integrations-common/-/ckeditor4-integrations-common-1.0.0.tgz",
+      "integrity": "sha512-OAoQT/gYrHkg0qgzf6MS/rndYhq3SScLVQ3rtXQeuCE8ju7nFHg3qZ7WGA2XpFxcZzsMP6hhugXqdel5vbcC3g=="
+    },
+    "ckeditor4-vue": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ckeditor4-vue/-/ckeditor4-vue-2.1.1.tgz",
+      "integrity": "sha512-BBmpT1BYxOmaA+qy9+hvhG0tDYCGqFve1eDSol0ZNwWCm1hZvmPAke809AhkHFUjb834dbNRlTwH3c2qedjtkQ==",
+      "requires": {
+        "ckeditor4-integrations-common": "^1.0.0"
+      }
+    },
     "class-utils": {
       "version": "0.3.6",
       "resolved": "https://registry.npm.taobao.org/class-utils/download/class-utils-0.3.6.tgz",
@@ -7101,6 +7120,22 @@
         "safer-buffer": "^2.1.0"
       }
     },
+    "echarts": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.3.3.tgz",
+      "integrity": "sha512-BRw2serInRwO5SIwRviZ6Xgm5Lb7irgz+sLiFMmy/HOaf4SQ+7oYqxKzRHAKp4xHQ05AuHw1xvoQWJjDQq/FGw==",
+      "requires": {
+        "tslib": "2.3.0",
+        "zrender": "5.3.2"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
+      }
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz",
@@ -10942,6 +10977,11 @@
         "minimist": "^1.2.5"
       }
     },
+    "moment": {
+      "version": "2.29.4",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
+      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w=="
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npm.taobao.org/move-concurrently/download/move-concurrently-1.0.1.tgz",
@@ -17245,6 +17285,21 @@
           "integrity": "sha1-48mzFWnhBoEd8kL3FXJaH0xJQyA="
         }
       }
+    },
+    "zrender": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.3.2.tgz",
+      "integrity": "sha512-8IiYdfwHj2rx0UeIGZGGU4WEVSDEdeVCaIg/fomejg1Xu6OifAL1GVzIPHg2D+MyUkbNgPWji90t0a8IDk+39w==",
+      "requires": {
+        "tslib": "2.3.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
+      }
     }
   }
 }

package.json

@@ -3,7 +3,8 @@
   "version": "5.0.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
+    "serve": "vue-cli-service serve --mode production",
+    "serve:dev": "vue-cli-service serve --mode development",
     "build": "vue-cli-service build",
     "build:prod": "vue-cli-service build --mode production",
     "build:sit": "vue-cli-service build --mode production.sit",
@@ -13,14 +14,17 @@
     "axios": "^0.19.2",
     "babel-eslint": "^8.0.1",
     "babel-plugin-component": "^1.1.1",
+    "ckeditor4-vue": "^2.1.1",
     "core-js": "^3.6.5",
+    "echarts": "^5.3.3",
     "element-theme": "^2.0.1",
     "element-ui": "^2.15.7",
     "js-cookie": "^2.2.1",
     "lodash": "^4.17.19",
-    "sass": "^1.26.5",
+    "moment": "^2.29.4",
     "qs": "^6.9.4",
     "quill": "^1.3.7",
+    "sass": "^1.26.5",
     "sass-loader": "^9.0.2",
     "screenfull": "^4.2.1",
     "svg-sprite-loader": "^5.0.0",
@@ -31,6 +35,7 @@
     "vuex": "^3.5.1"
   },
   "devDependencies": {
+    "@types/lodash": "^4.14.182",
     "@vue/cli-plugin-babel": "^4.4.6",
     "@vue/cli-service": "^4.4.6",
     "element-theme-chalk": "^2.15.7",

public/i18n.js

@@ -0,0 +1,25 @@
+/**
+ * Created by Jacky.Gao on 2017-10-01.
+ */
+ import defaultI18nJsonData from './designer.json';
+ import en18nJsonData from './designer_en.json';
+ export default function buildLocal () {
+    let language = getCookie('language') || 'zh-CN';
+    window.i18n = defaultI18nJsonData;
+    if (language !== 'zh-CN') {
+        window.i18n = en18nJsonData;
+    }
+}
+
+function getCookie (name) {
+    var strcookie = document.cookie;//获取cookie字符串
+    var arrcookie = strcookie.split("; ");//分割
+    //遍历匹配
+    for (var i = 0; i < arrcookie.length; i++) {
+        var arr = arrcookie[i].split("=");
+        if (arr[0] == name){
+            return arr[1];
+        }
+    }
+    return "";
+}

public/index.html

@@ -10,6 +10,7 @@
     window.SITE_CONFIG['version'] = 'v5.0.0';
     window.SITE_CONFIG['nodeEnv'] = '<%= process.env.VUE_APP_NODE_ENV %>';
     window.SITE_CONFIG['apiURL'] = '';                      // api请求地址
+    window.SITE_CONFIG['projURL'] = '';                     // api请求地址
     window.SITE_CONFIG['storeState'] = {};                  // vuex本地储存初始化状态（用于不刷新页面的情况下，也能重置初始化项目中所有状态）
     window.SITE_CONFIG['contentTabDefault'] = {             // 内容标签页默认属性对象
       'name': '',        // 名称, 由 this.$route.name 自动赋值（默认，名称 === 路由名称 === 路由路径）
@@ -30,25 +31,25 @@
   <!-- 开发环境 -->
   <% if (process.env.VUE_APP_NODE_ENV === 'dev') { %>
     <script>
-    window.SITE_CONFIG['apiURL'] = 'http://localhost:8080/renren-admin';
+    window.SITE_CONFIG['apiURL'] = 'http://india.mes.picaiba.com/';
     </script>
   <% } %>
   <!-- 集成测试环境 -->
   <% if (process.env.VUE_APP_NODE_ENV === 'prod:sit') { %>
     <script>
-      window.SITE_CONFIG['apiURL'] = 'http://localhost:8080/renren-admin';
+      window.SITE_CONFIG['apiURL'] = 'http://india.mes.picaiba.com/';
     </script>
   <% } %>
   <!-- 验收测试环境 -->
   <% if (process.env.VUE_APP_NODE_ENV === 'prod:uat') { %>
     <script>
-      window.SITE_CONFIG['apiURL'] = 'http://localhost:8080/renren-admin';
+      window.SITE_CONFIG['apiURL'] = 'http://india.mes.picaiba.com/';
     </script>
   <% } %>
   <!-- 生产环境 -->
   <% if (process.env.VUE_APP_NODE_ENV === 'prod') { %>
     <script>
-      window.SITE_CONFIG['apiURL'] = 'http://localhost:8080/renren-admin';
+      window.SITE_CONFIG['apiURL'] = 'http://india.mes.picaiba.com/';
     </script>
   <% } %>
 </head>

src/App.vue

@@ -1,34 +1,34 @@
 <template>
-  <transition name="el-fade-in-linear">
+	<transition name="el-fade-in-linear">
-    <router-view />
+		<router-view />
-  </transition>
+	</transition>
 </template>
 
 <style>
-  .el-table th.gutter{
+.el-table th.gutter {
-    display: table-cell!important;
+	display: table-cell !important;
-  }
+}
 </style>
 <script>
 import Cookies from 'js-cookie'
 import { messages } from '@/i18n'
 export default {
-  watch: {
+	watch: {
-    '$i18n.locale': 'i18nHandle'
+		'$i18n.locale': 'i18nHandle'
-  },
+	},
-  created () {
+	created() {
-    this.i18nHandle(this.$i18n.locale)
+		this.i18nHandle(this.$i18n.locale)
-  },
+	},
-  methods: {
+	methods: {
-    i18nHandle (val, oldVal) {
+		i18nHandle(val, oldVal) {
-      Cookies.set('language', val)
+			Cookies.set('language', val)
-      document.querySelector('html').setAttribute('lang', val)
+			document.querySelector('html').setAttribute('lang', val)
-      document.title = messages[val].brand.lg
+			document.title = messages[val].brand.lg
-      // 非登录页面，切换语言刷新页面
+			// 非登录页面，切换语言刷新页面
-      if (this.$route.name !== 'login' && oldVal) {
+			if (this.$route.name !== 'login' && oldVal) {
-        window.location.reload()
+				window.location.reload()
-      }
+			}
-    }
+		}
-  }
+	}
 }
 </script>

src/assets/scss/common.scss

@@ -5,6 +5,8 @@
 }
 body {
   font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
+  // font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+  // font-family: Avenir,Helvetica Neue,Arial,Helvetica,sans-serif;
   font-size: $--font-size-base;
   line-height: $base--line-height;
   color: $--color-text-primary;
@@ -15,8 +17,8 @@ a {
   text-decoration: none;
   &:focus,
   &:hover {
-    color: $--color-primary;
+    color: #fff;
-    text-decoration: underline;
+    // text-decoration: underline;
   }
 }
 img {
@@ -217,6 +219,17 @@ img {
     &__brand {
       &-lg {
         display: none;
+        // margin: 0;
+        // color: #fff;
+        // width: 189px;
+        // overflow: hidden;
+        // text-overflow: ellipsis;
+        // white-space: nowrap;
+        // font-weight: 500;
+        // line-height: 50px;
+        // font-size: 14px;
+        // font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
+        // vertical-align: middle;
       }
       &-mini {
         display: inline-block;
@@ -268,7 +281,9 @@ img {
   box-shadow: 0 1px 0 0 rgba(0, 0, 0, .05);
   &--colorful {
     .aui-navbar__body {
+      // navbar body颜色
       background-color: transparent;
+      // background-color: #304156;
     }
     .aui-navbar__menu {
       > .el-menu-item,
@@ -278,6 +293,7 @@ img {
         &:hover {
           color: #fff;
           background-color: mix(#000, $--color-primary, 15%);
+          // background-color: #001528;
         }
       }
       > .el-menu-item.is-active,
@@ -285,7 +301,7 @@ img {
         color: #fff;
         &:focus,
         &:hover {
-          color: #fff;
+          color: #263445;
         }
       }
       .el-menu-item i,
@@ -332,7 +348,16 @@ img {
     color: #fff;
     overflow: hidden;
     transition: width .3s;
-    &-lg,
+    &-lg {
+      width: 238px;
+      height: 100%;
+      font-size: 18px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #FFFFFF;
+      line-height: 20px;
+      margin-top: 7px;
+    }
     &-mini {
       max-width: 100%;
       color: #fff;
@@ -392,9 +417,10 @@ img {
       * {
         vertical-align: initial;
       }
+      // 
       .aui-navbar__icon-menu {
         vertical-align: middle;
-        font-size: 16px;
+        font-size: 22px;
       }
       .el-dropdown {
         color: $--color-text-secondary;
@@ -463,7 +489,8 @@ img {
   bottom: 0;
   z-index: 1020;
   width: $sidebar--width;
-  background-color: #fff;
+  // background-color: #fff;
+  background-color:#304156;
   box-shadow: 1px 0 2px 0 rgba(0, 0, 0, .05);
   overflow: hidden;
   transition: width .3s;
@@ -471,23 +498,28 @@ img {
     background-color: $sidebar--background-color-dark;
     .aui-sidebar__menu,
     > .el-menu--popup {
-      background-color: $sidebar--background-color-dark;
+      // background-color: $sidebar--background-color-dark;
+      background-color: #304156;;
       .el-menu-item,
       .el-submenu > .el-submenu__title {
-        color: $sidebar--text-color-dark;
+        // color: $sidebar--text-color-dark;
+        color: #f4f4f5;
         &:focus,
         &:hover {
           color: mix(#fff, $sidebar--text-color-dark, 50%);
-          background-color: mix(#fff, $sidebar--background-color-dark, 2.5%);
+          // background-color: mix(#fff, $sidebar--background-color-dark, 2.5%);
+          background-color:#0B253F;
         }
       }
       .el-menu,
       .el-submenu.is-opened {
-        background-color: mix(#000, $sidebar--background-color-dark, 15%);
+        // background-color: mix(#000, $sidebar--background-color-dark, 15%);
+        background-color:#0B253F;
       }
       .el-menu-item.is-active,
       .el-submenu.is-active > .el-submenu__title {
-        color: mix(#fff, $sidebar--text-color-dark, 80%);
+        // color: mix(#fff, $sidebar--text-color-dark, 80%);
+        color: #409EFF;
       }
     }
   }

src/assets/scss/variables.scss

@@ -5,9 +5,11 @@ $base--line-height: 1.15;
 $navbar--height: 50px;
 
 // Sidebar
-$sidebar--width: 230px;
+// $sidebar--width: 300px;
+$sidebar--width: 248px;
 $sidebar--width-fold: 64px;
-$sidebar--background-color-dark: #263238;
+// $sidebar--background-color-dark: #263238;
+$sidebar--background-color-dark: #001529;
 $sidebar--text-color-dark: #8a979e;
 $sidebar--menu-item-height: 48px;
 

src/components/Breadcrumb/index.vue

@@ -0,0 +1,93 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-01-27 10:07:42
+ * @LastEditTime: 2021-01-28 16:26:15
+ * @LastEditors: gtz
+ * @Description: In User Settings Edit
+ * @FilePath: \mt-bus-fe\src\components\Breadcrumb\index.vue
+-->
+<template>
+  <el-breadcrumb class="app-breadcrumb" separator="/">
+    <transition-group name="breadcrumb">
+      <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
+        <span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="isredirect">{{ item.meta.title }}</span>
+        <span v-else class="no-redirect">{{ item.meta.title }}</span>
+        <!-- @click.prevent="handleLink(item)" -->
+      </el-breadcrumb-item>
+    </transition-group>
+  </el-breadcrumb>
+</template>
+
+<script>
+import pathToRegexp from 'path-to-regexp'
+
+export default {
+  data() {
+    return {
+      levelList: null
+    }
+  },
+  watch: {
+    $route(route) {
+      // if you go to the redirect page, do not update the breadcrumbs
+      if (route.path.startsWith('/redirect/')) {
+        return
+      }
+      this.getBreadcrumb()
+    }
+  },
+  created() {
+    this.getBreadcrumb()
+  },
+  methods: {
+    getBreadcrumb() {
+      // only show routes with meta.title
+      const matched = this.$route.matched.filter(item => item.meta && item.meta.title)
+      // const first = matched[0]
+
+      // if (!this.isDashboard(first)) {
+      //   matched = [{ path: '/dashboard', meta: { title: 'Dashboard' }}].concat(matched)
+      // }
+
+      this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
+    },
+    isDashboard(route) {
+      const name = route && route.name
+      if (!name) {
+        return false
+      }
+      return name.trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase()
+    },
+    pathCompile(path) {
+      // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
+      const { params } = this.$route
+      var toPath = pathToRegexp.compile(path)
+      return toPath(params)
+    },
+    handleLink(item) {
+      const { redirect, path } = item
+      if (redirect) {
+        this.$router.push(redirect)
+        return
+      }
+      this.$router.push(this.pathCompile(path))
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-breadcrumb.el-breadcrumb {
+  display: inline-block;
+  font-size: 14px;
+  line-height: 48px;
+  margin-left: 8px;
+  .isredirect {
+    color: rgba(0, 0, 0, 0.65);
+  }
+  .no-redirect {
+    color: #8C8C8C;
+    cursor: text;
+  }
+}
+</style>

src/components/Hamburger/index.vue

@@ -0,0 +1,35 @@
+<template>
+  <div style="padding: 5px 15px 5px 32px;" @click="toggleClick">
+    <svg-icon style="width: 24px; height: 24px" class="item-icon hamburger" :class="{'is-active':isActive}" icon-class="hamburgerBtn" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Hamburger',
+  props: {
+    isActive: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    toggleClick() {
+      this.$emit('toggleClick')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.hamburger {
+  display: inline-block;
+  vertical-align: middle;
+  width: 20px;
+  height: 20px;
+}
+
+.hamburger.is-active {
+  transform: rotate(180deg);
+}
+</style>

src/components/SvgIcon/index.vue

@@ -0,0 +1,62 @@
+<template>
+  <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
+  <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
+    <use :xlink:href="iconName" />
+  </svg>
+</template>
+
+<script>
+// doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage
+import { isExternal } from '@/utils/validate'
+
+export default {
+  name: 'SvgIcon',
+  props: {
+    iconClass: {
+      type: String,
+      required: true
+    },
+    className: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    isExternal() {
+      return isExternal(this.iconClass)
+    },
+    iconName() {
+      return `#icon-${this.iconClass}`
+    },
+    svgClass() {
+      if (this.className) {
+        return 'svg-icon ' + this.className
+      } else {
+        return 'svg-icon'
+      }
+    },
+    styleExternalIcon() {
+      return {
+        mask: `url(${this.iconClass}) no-repeat 50% 50%`,
+        '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.svg-icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+
+.svg-external-icon {
+  background-color: currentColor;
+  mask-size: cover!important;
+  display: inline-block;
+}
+</style>

src/components/base-detail-page/index.vue

@@ -0,0 +1,548 @@
+<template>
+	<div class="super-flexible-dialog" :title="isDetail ? title.detail : !dataForm.id ? title.add : title.edit" @close="handleClose">
+		<div style="max-height: 60vh; overflow-y: scroll; overflow-x: hidden;">
+			<el-form ref="dataForm" :model="dataForm" :rules="dataFormRules">
+				<!-- 如果需要更精细一点的布局，可以根据配置项实现地再复杂一点，但此处暂时全部采用一行两列布局  -->
+				<el-row v-for="n in rows" :key="n" :gutter="20">
+					<el-col v-for="c in COLUMN_PER_ROW" :key="`${n}+'col'+${c}`" :span="getSpan(n, c)">
+						<!-- <el-col v-for="c in COLUMN_PER_ROW" :key="`${n}+'col'+${c}`" :span="24 / COLUMN_PER_ROW"> -->
+						<!-- :class="{ 'hidden-input': configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].hidden }" -->
+						<el-form-item
+							v-if="configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)]"
+							:prop="configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name"
+							:key="`${n}-col-${c}-item`"
+							:label="getLabel(n, c)"
+						>
+							<!-- 暂时先不实现部分输入方式 -->
+							<el-input
+								v-if="getType(n, c) === 'input'"
+								:placeholder="getPlaceholder(n, c)"
+								v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"
+								clearable
+							/>
+							<el-radio v-if="getType(n, c) === 'radio'" v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"></el-radio>
+							<el-checkbox v-if="getType(n, c) === 'check'" v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"></el-checkbox>
+							<el-select
+								v-if="getType(n, c) === 'select'"
+								:placeholder="getPlaceholder(n, c)"
+								v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"
+								clearable
+								@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-select>
+							<el-switch v-if="getType(n, c) === 'switch'" v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"></el-switch>
+							<el-cascader
+								v-if="getType(n, c) === 'cascader'"
+								v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"
+								:options="configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].options"
+								:props="configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].props"
+							></el-cascader>
+							<el-time-select v-if="getType(n, c) === 'time'" v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"></el-time-select>
+							<el-date-picker
+								v-if="getType(n, c) === 'date'"
+								v-bind="configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].props"
+								:placeholder="getPlaceholder(n, c)"
+								v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"
+							></el-date-picker>
+						</el-form-item>
+					</el-col>
+				</el-row>
+
+				<!-- extra components , like Markdown or RichEdit -->
+				<template v-if="configs.extraComponents && configs.extraComponents.length > 0">
+					<el-form-item v-for="(ec, index) in configs.extraComponents" :key="ec.name + index" :label="ec.label" class="extra-components">
+						<component style="margin-top: 40px;" v-if="ec.hasModel" :is="ec.component" v-bind="ec.props" v-model="dataForm[ec.name]" @ready="handleEditorReady" />
+						<!-- <component v-if="ec.hasModel" :is="ec.component" v-bind="ec.props" v-model="dataForm[ec.name]" /> -->
+						<component
+							v-else
+							:is="ec.component"
+							v-bind="ec.props"
+							@uploader-update-filelist="handleUploadListUpdate($event, ec.props.extraParams.typeCode)"
+							:uploader-inject-file-list="/*用于设备分流的*/ fileList[ec.props.extraParams.typeCode]"
+						/>
+					</el-form-item>
+				</template>
+			</el-form>
+
+			<template v-if="dataForm.id && configs.subtable">
+				<attr-form :pId="dataForm.id" v-bind="configs.subtable" />
+			</template>
+		</div>
+		<span slot="footer" class="dialog-footer">
+			<template v-for="(operate, index) in configs.operations">
+				<!-- {{ operate.name | btnNameFilter }} -->
+				<el-button
+					v-if="
+						operate.showAlways ||
+							(((dataForm.id && operate.showOnEdit) || (!dataForm.id && !operate.showOnEdit)) && (operate.permission ? $hasPermission(operate.permission) : true))
+					"
+					:key="`operate-${index}`"
+					:type="btnType[operate.name]"
+					@click="handleClick(operate)"
+					>{{ btnName[operate.name] }}</el-button
+				>
+			</template>
+		</span>
+	</div>
+</template>
+
+<script>
+import AttrForm from '../AttrForm'
+import { pick } from 'lodash/object'
+
+// 标题 for i18n
+const title = {
+	detail: i18n.t('detail'),
+	add: i18n.t('add'),
+	edit: '编辑'
+}
+
+// 或者也可以改造成自定义颜色：
+const btnType = {
+	save: 'success',
+	update: 'primary',
+	reset: 'text'
+	// cancel: 'text'
+	// add more...
+}
+
+const btnName = {
+	// for i18n
+	save: '保存',
+	update: '更新',
+	reset: '重置',
+	cancel: i18n.t('cancel')
+	// add more...
+}
+
+// 每行的列数
+const COLUMN_PER_ROW = 2
+
+export default {
+	name: 'AddOrUpdateDialog',
+	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: () => ({}) // 此处省去类型检查，使用者自行注意就好
+		}
+	},
+	filters: {
+		nameFilter: function(name) {
+			if (!name) return null
+			// for i18n
+			const defaultNames = {
+				name: i18n.t('name'),
+				code: i18n.t('code'),
+				remark: i18n.t('remark'),
+				description: i18n.t('desc'),
+				specifications: i18n.t('prod.spec')
+				// add more...
+			}
+
+			return defaultNames[name]
+		}
+	},
+	// provide() {
+	// 	return {
+	// 		_df: this.dataForm
+	// 	}
+	// },
+	data() {
+		return {
+			COLUMN_PER_ROW,
+			title,
+			/** 按钮相关属性 */
+			btnName,
+			btnType,
+			defaultNames: {
+				name: i18n.t('name'),
+				code: i18n.t('code'),
+				remark: i18n.t('remark'),
+				description: i18n.t('desc'),
+				specifications: i18n.t('prod.spec')
+				// add more...
+			},
+			defaultPlaceholders: {}, // 自动根据 defaultNames 计算得来
+			/** 表单相关属性 */
+			visible: false,
+			isEdit: false,
+			isDetail: false,
+			dataForm: {},
+			dataFormRules: {},
+			tempForm: [], // 临时保存自动生成的code，或其他数据
+			shouldWait: null,
+			fileForm: {}, // 文件上传分流用、合并用的表单，根据 typeCode 进行分流，在请求时合并
+			fileList: {} // 文件加载时分流，依据 typeCode
+		}
+	},
+	computed: {
+		rows() {
+			// 本组件只实现了'一行两列'的表单布局
+			return Math.ceil(this.configs.fields.length / COLUMN_PER_ROW)
+		}
+	},
+	mounted() {
+		/** 计算 defaultPlaceholders */
+		const prefix = '请输入'
+		Object.entries(this.defaultNames).map(([key, value]) => {
+			this.defaultPlaceholders[key] = prefix + value
+		})
+
+		/** 转换 configs.fields 的结构，把纯字符串转为对象 */
+		this.$nextTick(() => {
+			this.configs.fields = this.configs.fields.map(item => {
+				if (typeof item === 'string') {
+					return { name: item }
+				}
+				return item
+			})
+
+			/** 动态设置dataForm字段 */
+			this.configs.fields.forEach(item => {
+				this.$set(this.dataForm, [item.name], '')
+
+				/** select 的默认值设置 */
+				if (item.type === 'select') {
+					const opts = item.options || []
+					const dft = opts.find(item => item.default || false)
+					if (dft) {
+						this.$set(this.dataForm, [item.name], dft.value)
+					}
+				}
+
+				if (item.api) {
+					/** 自动请求并填充 */
+					// or this.shouldWaitPool = []
+					this.shouldWait = this.$http({
+						url: this.$http.adornUrl(item.api),
+						method: 'POST' // 也可以改成动态决定
+					}).then(({ data: res }) => {
+						if (res && res.code === 0) {
+							// this.dataForm[item.name] = res.data // <=== 此处需要对接口
+							this.tempForm.push({ name: item.name, data: res.data })
+						}
+					})
+				} // end if (item.api)
+
+				if (item.required) {
+					const requiredRule = {
+						required: true,
+						message: '请输入必填项',
+						trigger: 'change'
+					}
+					/** 检查是否已经存在该字段的规则 */
+					const exists = this.dataFormRules[item.name] || null
+					/** 设置验证规则  */
+					if (exists) {
+						const unset = true
+						for (const rule of exists) {
+							if (rule.required) unset = false
+						}
+						if (unset) {
+							exists.push(requiredRule)
+						}
+					} else {
+						/** 不存在已有规则 */
+						this.$set(this.dataFormRules, [item.name], [requiredRule])
+					}
+				} // end if (item.required)
+
+				if (item.rules) {
+					const exists = this.dataFormRules[item.name] || null
+					if (exists) {
+						// 浅拷贝过去
+						exists.push(...item.rules)
+					} else {
+						this.$set(this.dataFormRules, [item.name], [...item.rules])
+					}
+				} // end if (item.rules)
+			})
+
+			/** 计算默认值 */
+			function calDefault(type) {
+				switch (type) {
+					case 'array':
+						return []
+					// more case...
+					default:
+						return ''
+				}
+			}
+			/** 检查是否需要额外的组件 */
+			this.configs.extraComponents &&
+				this.configs.extraComponents.forEach(item => {
+					if (Object.hasOwn(this.dataForm, [item.name])) {
+						console.log('有了!')
+						return
+					} else {
+						console.log('新建！')
+						this.$set(this.dataForm, [item.name], calDefault(item.fieldType))
+					}
+
+					console.log('component: ', item.component)
+				})
+
+			/** 单独设置 id */
+			this.$set(this.dataForm, 'id', null)
+			console.log('mounted: this.dataForm', JSON.stringify(this.dataForm))
+		})
+	},
+
+	methods: {
+		getSpan(n, c) {
+			const opt = this.configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)]
+			return opt && opt.span ? opt.span : 24 / COLUMN_PER_ROW
+		},
+
+		getLabel(n, c) {
+			const opt = this.configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)]
+			if (opt) {
+				// if opt is valid
+				return opt.label ? opt.label : this.defaultNames[opt.name]
+			}
+		},
+
+		getPlaceholder(n, c) {
+			const opt = this.configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)]
+			if (opt) {
+				// if opt is valid
+				return opt.placeholder
+					? opt.placeholder
+					: this.defaultPlaceholders[opt.name]
+					? this.defaultPlaceholders[opt.name]
+					: opt.label
+					? (opt.type === 'select' ? i18n.t('choose') : '请输入') + opt.label
+					: null
+
+				// : opt.type === 'select'
+				// ? i18n.t('choose')
+				// : '请输入'
+			}
+		},
+
+		getType(n, c) {
+			const opt = this.configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)]
+			if (opt) {
+				if (!opt.type || ['input', 'number' /** add more.. */].includes(opt.type)) {
+					return 'input'
+				} else if (['select' /** add more.. */].includes(opt.type)) {
+					return 'select'
+				} else if (['cascader'].includes(opt.type)) {
+					return 'cascader'
+				} else if (['date'].includes(opt.type)) {
+					return 'date'
+				}
+				// add more...
+			} else {
+				return 'input'
+			}
+		},
+
+		init(id) {
+			this.visible = true
+			this.$nextTick(() => {
+				this.$refs['dataForm'].resetFields()
+				this.dataForm.id = id || null
+				if (this.dataForm.id) {
+					this.$http({
+						url: this.$http.adornUrl(`${this.configs.infoUrl}/${this.dataForm.id}`),
+						method: 'get'
+					}).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)
+
+							// LABEL: FILE_RELATED
+							/** 对文件下载进行分流 */
+							this.fileList = {}
+							if (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)) {
+										/** 已存在 */
+										// this.fileList[file.typeCode].push({ id: file.id, name: fileName, typeCode: file.typeCode })
+										this.fileList[file.typeCode].push(file)
+									} else {
+										// this.fileList[file.typeCode] = [{ id: file.id, name: fileName, typeCode: file.typeCode }]
+										this.fileList[file.typeCode] = [file]
+									}
+
+									/** [2] 处理 fileForm */
+									if (Object.hasOwn(this.fileForm, file.typeCode)) {
+										this.fileForm[file.typeCode].push(file.id)
+									} else {
+										this.fileForm[file.typeCode] = [file.id]
+									}
+								})
+								console.log('after分流：', this.fileList)
+							}
+						}
+					})
+				} else {
+					/** 如果不是编辑，就填充自动生成的数据 */
+					if (this.shouldWait)
+						this.shouldWait.then(() => {
+							if (this.tempForm.length) {
+								console.log('create new, tempform', JSON.stringify(this.tempForm.length))
+								this.tempForm.forEach(item => {
+									console.log('item data', item.data)
+									this.dataForm[item.name] = item.data
+								})
+								console.log('create new, dataform', JSON.stringify(this.dataForm))
+							}
+						})
+				}
+			})
+		},
+
+		emitSelectChange(name, id) {
+			this.$emit('select-change', { name, id })
+		},
+
+		handleEditorReady(val) {
+			console.log('editor  rready..', val)
+		},
+
+		handleClick(btn) {
+			/** 提取url */
+			const urls = {}
+			this.configs.operations.map(item => {
+				urls[item.name] = {}
+				urls[item.name].url = item.url
+				urls[item.name].extraFields = item.extraFields || {}
+			})
+			/** 操作 */
+			switch (btn.name) {
+				case 'save':
+				case 'update':
+					/** 需要验证表单的操作 */
+					this.$refs['dataForm'].validate(valid => {
+						if (valid) {
+							/** 对于文件上传的单独处理（合并处理） */
+							if (Object.keys(this.fileForm).length) {
+								console.log('fileform 有值')
+								// LABEL: FILE_RELATED
+								let fileIds = []
+								for (const [key, item] of Object.entries(this.fileForm)) {
+									if (Array.isArray(item)) {
+										fileIds = fileIds.concat(item)
+									} else {
+										console.error('handleClick(): 上传文件数组类型不正确')
+									}
+								}
+								this.$set(this.dataForm, 'fileIds', fileIds)
+							}
+
+							console.log('before send: ', this.dataForm)
+
+							this.$http({
+								url: this.$http.adornUrl(urls[btn.name].url),
+								method: btn.name === 'save' ? 'POST' : 'PUT',
+								data: { ...this.dataForm, ...urls[btn.name].extraFields }
+							})
+								.then(({ data: res }) => {
+									if (res && res.code === 0) {
+										this.$message({
+											message: btn.name === 'save' ? i18n.t('prompt.success') : '更新成功!',
+											type: 'success',
+											duration: 1500,
+											onClose: () => {
+												this.$emit('refreshDataList')
+												this.visible = false
+											}
+										})
+									} else {
+										this.$message.error(res.msg)
+									}
+								})
+								.catch(err => {
+									this.$message({
+										message: err,
+										type: 'error',
+										duration: 2000
+									})
+								})
+						}
+					})
+					return
+				case 'reset':
+					for (const key of Object.keys(this.dataForm)) {
+						if (typeof this.dataForm[key] === 'string') {
+							this.dataForm[key] = ''
+						} else if (this.dataForm[key] instanceof Array) {
+							this.dataForm[key].splice(0)
+						} else {
+							this.dataForm[key] = null
+						}
+					}
+					break
+				case 'cancel':
+					this.visible = false
+				// add more..
+			}
+		},
+
+		// LABEL: FILE_RELATED
+		handleUploadListUpdate(filelist, typeCode = 'DefaultTypeCode') {
+			console.log('before handleUploadListUpdate(): ', JSON.parse(JSON.stringify(this.fileForm)))
+			// 设备类型 typeCode: EquipmentTypeFile
+			// 设备信息 typeCode: EquipmentInfoFile | EquipmentInfoImage
+
+			// 原先写法：直接更新 dataForm 对象，不适用于有多个上传组件的需求
+			// this.$set(
+			// 	this.dataForm,
+			// 	'fileIds',
+			// 	filelist.map(item => item.id)
+			// )
+			// console.log('handleUploadListUpdate(): ', this.dataForm)
+			// 现更改为分流写法
+			this.$set(
+				this.fileForm,
+				typeCode,
+				filelist.map(item => item.id)
+			)
+			console.log('after handleUploadListUpdate(): ', this.fileForm)
+		},
+
+		handleClose() {
+			this.$emit('destory-dialog')
+			this.visible = false
+		}
+	}
+}
+</script>
+
+<style scoped>
+.super-flexible-dialog >>> .el-select,
+.super-flexible-dialog >>> .el-cascader {
+	width: 100%;
+}
+
+.super-flexible-dialog >>> ::-webkit-scrollbar {
+	width: 4px;
+	border-radius: 4px;
+	background: #fff;
+}
+
+.super-flexible-dialog >>> ::-webkit-scrollbar-thumb {
+	width: 4px;
+	border-radius: 4px;
+	background: #ccc;
+}
+
+.super-flexible-dialog >>> .hidden-input {
+	display: none;
+}
+</style>

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

@@ -0,0 +1,283 @@
+<template>
+	<div class="attr-form">
+		<h3>
+			{{ title }} <el-button style="margin-left: 8px;" type="text" v-if="!isDetail && !showAddAttr" @click="showAddAttr = true">{{ $t('add') }}</el-button>
+		</h3>
+		<div v-if="!showAddAttr">
+			<component
+				key="sub-table"
+				:is="require('../../base-table/index.vue').default"
+				:table-head-configs="filterTableConfigs()"
+				:data="dataList"
+				:page="pageIndex"
+				:size="pageSize"
+				:max-height="calcMaxHeight(8)"
+				@operate-event="handleOperations"
+			/>
+			<el-pagination
+				@size-change="sizeChangeHandle"
+				@current-change="currentChangeHandle"
+				:current-page="pageIndex"
+				:page-sizes="[5, 10, 20, 50]"
+				:page-size="pageSize"
+				:total="totalPage"
+				layout="total, sizes, prev, pager, next, jumper"
+			>
+			</el-pagination>
+		</div>
+		<div v-else style="background: #eee; border-radius: 8px; padding: 12px;">
+			<el-row>
+				<el-col>
+					<el-form ref="AttrForm" :model="AttrForm" :rules="AttrFormRules" :inline="true" label-position="top">
+						<el-row :gutter="20" style="padding: 0 24px;">
+							<el-col :span="attrFormFields.length > 6 ? 6 : 12" v-for="field in attrFormFields" :key="field.prop + 'col'">
+								<el-form-item :key="field.prop" :prop="field.prop" :label="field.name" style="width: 100%">
+									<el-input v-if="field.formType === 'input' || !field.formType" v-model="AttrForm[field.prop]" :placeholder="$t('hints.input')" clearable />
+									<el-select v-if="field.formType === 'select'" v-model="AttrForm[field.prop]" clearable>
+										<el-option v-for="opt in field.formOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
+									</el-select>
+									<!-- add more...  -->
+								</el-form-item>
+							</el-col>
+						</el-row>
+					</el-form>
+				</el-col>
+			</el-row>
+			<el-row style="text-align: right;">
+				<el-button size="small" @click="handleCloseAttrForm">{{ $t('cancel') }}</el-button>
+				<el-button type="success" size="small" @click="handleSaveAttrForm">{{ $t('save') }}</el-button>
+			</el-row>
+		</div>
+	</div>
+</template>
+
+<script>
+import i18n from '@/i18n'
+import BaseTable from '@/components/base-table'
+import { pick } from 'lodash/object'
+import { calcMaxHeight } from '@/utils'
+export default {
+	name: 'AttrForm',
+	components: { BaseTable },
+	props: {
+		isDetail: {
+			type: Boolean,
+			default: false
+		},
+		visible: {
+			type: Boolean,
+			default: false
+		},
+		/** subtable 需要设置的属性 */
+		title: {
+			type: String,
+			default: ''
+		},
+		url: {
+			type: String,
+			default: ''
+		},
+		tableConfigs: {
+			type: Array,
+			default: () => []
+		},
+		/** 表单提交需要的属性 */
+		relatedId: {
+			type: String,
+			required: true,
+			default: null
+		},
+		relatedField: {
+			type: String,
+			required: true,
+			default: null
+		}
+	},
+	data() {
+		return {
+			calcMaxHeight,
+			showAddAttr: false,
+			dataList: [],
+			pageIndex: 1,
+			pageSize: 10,
+			totalPage: 0,
+			AttrForm: {}, // 需动态设置
+			AttrFormRules: {} // 需动态设置
+		}
+	},
+	computed: {
+		attrFormFields() {
+			const _ = this.tableConfigs.filter(item => item.formField)
+			/** 顺带配置 AttrForm */
+			_.forEach(item => {
+				this.$set(this.AttrForm, [item.prop], '')
+			})
+
+			this.$set(this.AttrForm, 'id', null)
+			return _
+		}
+	},
+	mounted() {
+		this.getDataList()
+		/** 设置 AttrForm 的 rules */
+		for (const config of this.tableConfigs) {
+			if (config.rules) {
+				this.$set(this.AttrFormRules, [config.prop], config.rules)
+			}
+		}
+	},
+	methods: {
+		filterTableConfigs() {
+			if (this.isDetail) {
+				/** 如果是查看详情，就屏蔽操作列 */
+				return this.tableConfigs.filter(opt => opt.prop !== 'operations')
+			}
+			return this.tableConfigs
+		},
+		/** init dataform */
+		initAttrForm() {
+			Object.entries(this.AttrForm).forEach(([key, value]) => {
+				if (typeof value === 'object' || typeof value === 'number') {
+					this.AttrForm[key] = null
+				} else if (Array.isArray(value)) {
+					this.AttrForm[key] = []
+				} else {
+					this.AttrForm[key] = ''
+				}
+			})
+		},
+
+		/** requests */
+		getDataList() {
+			this.dataListLoading = true
+			// 获取动态属性列表
+			this.$http({
+				url: this.$http.adornUrl(`${this.url}/page`),
+				method: 'get',
+				params: this.$http.adornParams({
+					page: this.pageIndex,
+					limit: this.pageSize,
+					[this.relatedField]: this.relatedId
+					// order: 'asc/desc',
+					// orderField: 'name'
+				})
+			}).then(({ data: res }) => {
+				if (res && res.code === 0) {
+					this.dataList = res.data.list
+					this.totalPage = res.data.total
+				} else {
+					this.dataList = []
+					this.totalPage = 0
+				}
+				this.dataListLoading = false
+			})
+		},
+
+		/** handlers */
+		handleOperations({ type, data: id }) {
+			switch (type) {
+				case 'edit':
+					{
+						this.showAddAttr = true
+						this.$nextTick(() => {
+							this.$http.get(this.$http.adornUrl(`${this.url}/${id}`)).then(({ data: res }) => {
+								if (res && res.code === 0 && res.data) {
+									const neededFields = [...this.attrFormFields.map(item => item.prop), 'id']
+									const filtered = pick(res.data, neededFields)
+									for (let field of neededFields) {
+										this.AttrForm[field] = filtered[field]
+									}
+								}
+							})
+						})
+					}
+					break
+				case 'delete':
+					return this.deleteHandle(id)
+			}
+		},
+		deleteHandle(id) {
+			var ids = id ? [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(this.url),
+					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)
+					}
+				})
+			})
+		},
+
+		handleCloseAttrForm() {
+			this.showAddAttr = false
+			this.initAttrForm()
+		},
+
+		handleSaveAttrForm() {
+			this.$refs['AttrForm'].validate(valid => {
+				if (valid) {
+					this.$http({
+						// url: this.$http.adornUrl(`${this.url}/${!this.AttrForm.id ? '' : this.AttrForm.id}`),
+						url: this.$http.adornUrl(this.url),
+						method: this.AttrForm.id ? 'put' : 'post',
+						headers: {
+							'Content-Type': 'application/json'
+						},
+						data: JSON.stringify({ ...this.AttrForm, [this.relatedField]: this.relatedId })
+					}).then(({ data }) => {
+						if (data && data.code === 0) {
+							this.$message({
+								message: i18n.t('prompt.success'),
+								type: 'success',
+								duration: 1500,
+								onClose: () => {
+									this.showAddAttr = false
+									this.getDataList()
+									this.initAttrForm()
+								}
+							})
+						} else {
+							this.$message.error(data.msg)
+						}
+					})
+				}
+			})
+		},
+
+		// 每页数
+		sizeChangeHandle(val) {
+			this.pageSize = val
+			this.pageIndex = 1
+			this.getDataList()
+		},
+		// 当前页
+		currentChangeHandle(val) {
+			this.pageIndex = val
+			this.getDataList()
+		}
+	}
+}
+</script>
+
+<style scoped>
+.attr-form >>> .el-form .el-form-item__label {
+	padding: 0;
+}
+</style>

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

@@ -0,0 +1,594 @@
+<template>
+	<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">
+				<!-- 如果需要更精细一点的布局，可以根据配置项实现地再复杂一点，但此处暂时全部采用一行两列布局  -->
+				<el-row v-for="n in rows" :key="n" :gutter="20">
+					<el-col v-for="c in COLUMN_PER_ROW" :key="`${n}+'col'+${c}`" :span="getSpan(n, c)">
+						<!-- <el-col v-for="c in COLUMN_PER_ROW" :key="`${n}+'col'+${c}`" :span="24 / COLUMN_PER_ROW"> -->
+						<!-- :class="{ 'hidden-input': configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].hidden }" -->
+						<el-form-item
+							v-if="configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)]"
+							:prop="configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name"
+							:key="`${n}-col-${c}-item`"
+							:label="getLabel(n, c)"
+						>
+							<!-- 暂时先不实现部分输入方式 -->
+							<el-input
+								v-if="getType(n, c) === 'input'"
+								:placeholder="getPlaceholder(n, c)"
+								v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"
+								clearable
+								:disabled="isDetail"
+							/>
+							<el-radio v-if="getType(n, c) === 'radio'" v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]" :disabled="isDetail" />
+							<el-checkbox v-if="getType(n, c) === 'check'" v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]" :disabled="isDetail" />
+							<el-select
+								v-if="getType(n, c) === 'select'"
+								:placeholder="getPlaceholder(n, c)"
+								v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"
+								clearable
+								: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 + 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
+								v-if="getType(n, c) === 'cascader'"
+								v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"
+								: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
+								v-if="getType(n, c) === 'date'"
+								v-bind="configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].props"
+								:placeholder="getPlaceholder(n, c)"
+								v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"
+								:disabled="isDetail"
+							/>
+						</el-form-item>
+					</el-col>
+				</el-row>
+
+				<!-- extra components , like Markdown or RichEdit -->
+				<template v-if="configs.extraComponents && configs.extraComponents.length > 0">
+					<el-form-item v-for="(ec, index) in configs.extraComponents" :key="ec.name + index" :label="ec.label" class="extra-components">
+						<component
+							style="margin-top: 40px;"
+							v-if="ec.hasModel"
+							:is="ec.component"
+							v-bind="ec.props"
+							v-model="dataForm[ec.name]"
+							@ready="handleEditorReady"
+							:read-only="isDetail"
+						/>
+						<!-- <component v-if="ec.hasModel" :is="ec.component" v-bind="ec.props" v-model="dataForm[ec.name]" /> -->
+						<component
+							v-else
+							:is="ec.component"
+							v-bind="ec.props"
+							@uploader-update-filelist="handleUploadListUpdate($event, ec.props.extraParams.typeCode)"
+							:uploader-inject-file-list="/*用于设备分流的*/ fileList[ec.props.extraParams.typeCode]"
+							:read-only="isDetail"
+						/>
+					</el-form-item>
+				</template>
+			</el-form>
+
+			<template v-if="dataForm.id && configs.subtable">
+				<attr-form :related-id="dataForm.id" v-bind="configs.subtable" :is-detail="isDetail" />
+			</template>
+		</div>
+		<span slot="footer" class="dialog-footer">
+			<template v-for="(operate, index) in configs.operations">
+				<!-- {{ operate.name | btnNameFilter }} -->
+				<el-button
+					v-if="
+						!isDetail &&
+							(operate.showAlways ||
+								(((dataForm.id && operate.showOnEdit) || (!dataForm.id && !operate.showOnEdit)) && (operate.permission ? $hasPermission(operate.permission) : true)))
+					"
+					:key="`operate-${index}`"
+					:type="btnType[operate.name]"
+					@click="handleClick(operate)"
+					>{{ btnName[operate.name] }}</el-button
+				>
+			</template>
+			<el-button v-if="isDetail" @click="handleClick({ name: 'cancel' })">{{ $t('cancel') }}</el-button>
+		</span>
+	</el-dialog>
+</template>
+
+<script>
+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 = {
+	detail: i18n.t('detail'),
+	add: i18n.t('add'),
+	edit: i18n.t('edit')
+}
+
+// 或者也可以改造成自定义颜色：
+const btnType = {
+	save: 'success',
+	update: 'primary',
+	reset: 'text'
+	// cancel: 'text'
+	// add more...
+}
+
+const btnName = {
+	// for i18n
+	save: i18n.t('save'),
+	update: i18n.t('update'),
+	reset: i18n.t('reset'),
+	cancel: i18n.t('cancel')
+	// add more...
+}
+
+// 每行的列数
+const COLUMN_PER_ROW = 2
+
+export default {
+	name: 'AddOrUpdateDialog',
+	components: { AttrForm },
+	props: {
+		configs: {
+			type: Object,
+			default: () => ({}) // 此处省去类型检查，使用者自行注意就好
+		}
+	},
+	filters: {
+		nameFilter: function(name) {
+			if (!name) return null
+			// for i18n
+			const defaultNames = {
+				name: i18n.t('name'),
+				code: i18n.t('code'),
+				remark: i18n.t('remark'),
+				description: i18n.t('desc'),
+				specifications: i18n.t('prod.spec')
+				// add more...
+			}
+
+			return defaultNames[name]
+		}
+	},
+	// provide() {
+	// 	return {
+	// 		_df: this.dataForm
+	// 	}
+	// },
+	data() {
+		return {
+			COLUMN_PER_ROW,
+			title,
+			/** 按钮相关属性 */
+			btnName,
+			btnType,
+			defaultNames: {
+				name: i18n.t('name'),
+				code: i18n.t('code'),
+				remark: i18n.t('remark'),
+				description: i18n.t('desc'),
+				specifications: i18n.t('prod.spec')
+				// add more...
+			},
+			defaultPlaceholders: {}, // 自动根据 defaultNames 计算得来
+			/** 表单相关属性 */
+			visible: false,
+			isEdit: false,
+			isDetail: false,
+			dataForm: {},
+			dataFormRules: {},
+			tempForm: [], // 临时保存自动生成的code，或其他数据
+			shouldWait: null,
+			fileForm: {}, // 文件上传分流用、合并用的表单，根据 typeCode 进行分流，在请求时合并
+			fileList: {} // 文件加载时分流，依据 typeCode
+		}
+	},
+	computed: {
+		rows() {
+			// 本组件只实现了'一行两列'的表单布局
+			return Math.ceil(this.configs.fields.length / COLUMN_PER_ROW)
+		}
+	},
+	created() {
+		/** load lang */
+		// CKEditor.load()
+		// console.log('lang', CKEditor.component.props.config.defaultLanguage = 'en' )
+	},
+	mounted() {
+		/** 计算 defaultPlaceholders */
+		const prefix = i18n.t('hints.input')
+		Object.entries(this.defaultNames).map(([key, value]) => {
+			this.defaultPlaceholders[key] = prefix + value
+		})
+
+		/** 转换 configs.fields 的结构，把纯字符串转为对象 */
+		this.$nextTick(() => {
+			this.configs.fields = this.configs.fields.map(item => {
+				if (typeof item === 'string') {
+					return { name: item }
+				}
+				return item
+			})
+
+			/** 动态设置dataForm字段 */
+			this.configs.fields.forEach(item => {
+				this.$set(this.dataForm, [item.name], '')
+
+				/** select 的默认值设置 */
+				if (item.type === 'select') {
+					const opts = item.options || []
+					const dft = opts.find(item => item.default || false)
+					if (dft) {
+						this.$set(this.dataForm, [item.name], dft.value)
+					}
+				}
+
+				if (item.api) {
+					/** 自动请求并填充 */
+					// or this.shouldWaitPool = []
+					this.shouldWait = this.$http({
+						url: this.$http.adornUrl(item.api),
+						method: 'POST' // 也可以改成动态决定
+					}).then(({ data: res }) => {
+						if (res && res.code === 0) {
+							// this.dataForm[item.name] = res.data // <=== 此处需要对接口
+							this.tempForm.push({ name: item.name, data: res.data })
+						}
+					})
+				} // 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: 'blur'
+					}
+					/** 检查是否已经存在该字段的规则 */
+					const exists = this.dataFormRules[item.name] || null
+					/** 设置验证规则  */
+					if (exists) {
+						const unset = true
+						for (const rule of exists) {
+							if (rule.required) unset = false
+						}
+						if (unset) {
+							exists.push(requiredRule)
+						}
+					} else {
+						/** 不存在已有规则 */
+						this.$set(this.dataFormRules, [item.name], [requiredRule])
+					}
+				} // end if (item.required)
+
+				if (item.rules) {
+					const exists = this.dataFormRules[item.name] || null
+					if (exists) {
+						// 浅拷贝过去
+						exists.push(...item.rules)
+					} else {
+						this.$set(this.dataFormRules, [item.name], [...item.rules])
+					}
+				} // end if (item.rules)
+			})
+
+			/** 计算默认值 */
+			function calDefault(type) {
+				switch (type) {
+					case 'array':
+						return []
+					// more case...
+					default:
+						return ''
+				}
+			}
+			/** 检查是否需要额外的组件 */
+			this.configs.extraComponents &&
+				this.configs.extraComponents.forEach(item => {
+					// if (Object.hasOwn(this.dataForm, [item.name])) {
+					if (this.dataForm.hasOwnProperty(item.name)) {
+						return
+					} else {
+						this.$set(this.dataForm, [item.name], calDefault(item.fieldType))
+					}
+				})
+
+			/** 单独设置 id */
+			this.$set(this.dataForm, 'id', null)
+		})
+	},
+
+	methods: {
+		getSpan(n, c) {
+			const opt = this.configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)]
+			return opt && opt.span ? opt.span : 24 / COLUMN_PER_ROW
+		},
+
+		getLabel(n, c) {
+			const opt = this.configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)]
+			if (opt) {
+				// if opt is valid
+				return opt.label ? opt.label : this.defaultNames[opt.name]
+			}
+		},
+
+		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
+				return opt.placeholder
+					? opt.placeholder
+					: this.defaultPlaceholders[opt.name]
+					? this.defaultPlaceholders[opt.name]
+					: opt.label
+					? (opt.type === 'select' ? i18n.t('choose') : i18n.t('hints.input')) + opt.label
+					: null
+
+				// : opt.type === 'select'
+				// ? i18n.t('choose')
+				// : '请输入'
+			}
+		},
+
+		getType(n, c) {
+			const opt = this.configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)]
+			if (opt) {
+				if (!opt.type || ['input', 'number' /** add more.. */].includes(opt.type)) {
+					return 'input'
+				} else if (['select' /** add more.. */].includes(opt.type)) {
+					return 'select'
+				} else if (['cascader'].includes(opt.type)) {
+					return 'cascader'
+				} else if (['date'].includes(opt.type)) {
+					return 'date'
+				}
+				// add more...
+			} else {
+				return 'input'
+			}
+		},
+
+		init(id, isdetail = false) {
+			this.isDetail = isdetail
+			this.visible = true
+			this.$nextTick(() => {
+				this.$refs['dataForm'].resetFields()
+				this.dataForm.id = id || null
+				if (this.dataForm.id) {
+					this.$http({
+						url: this.$http.adornUrl(`${this.configs.infoUrl}/${this.dataForm.id}`),
+						method: 'get'
+					}).then(({ data: res }) => {
+						if (res && res.code === 0) {
+							const dataFormKeys = Object.keys(this.dataForm)
+							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)
+								this.dataForm.files.forEach(file => {
+									// const fileName = file.fileUrl.split('/').pop()
+									/** [1] 处理 fileList */
+									// 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)
+									} else {
+										// this.fileList[file.typeCode] = [{ id: file.id, name: fileName, typeCode: file.typeCode }]
+										this.fileList[file.typeCode] = [file]
+									}
+
+									/** [2] 处理 fileForm */
+									// 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]
+									}
+								})
+							}
+						}
+					})
+				} else {
+					/** 如果不是编辑，就填充自动生成的数据 */
+					if (this.shouldWait)
+						this.shouldWait.then(() => {
+							if (this.tempForm.length) {
+								// console.log('create new, tempform', JSON.stringify(this.tempForm.length))
+								this.tempForm.forEach(item => {
+									// console.log('item data', item.data)
+									this.dataForm[item.name] = item.data
+								})
+								// 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 })
+		},
+
+		handleEditorReady(val) {},
+
+		handleClick(btn) {
+			/** 提取url */
+			const urls = {}
+			this.configs.operations.map(item => {
+				urls[item.name] = {}
+				urls[item.name].url = item.url
+				urls[item.name].extraFields = item.extraFields || {}
+			})
+			/** 操作 */
+			switch (btn.name) {
+				case 'save':
+				case 'update':
+					/** 需要验证表单的操作 */
+					this.$refs['dataForm'].validate(valid => {
+						if (valid) {
+							/** 对于文件上传的单独处理（合并处理） */
+							if (Object.keys(this.fileForm).length) {
+								// LABEL: FILE_RELATED
+								let fileIds = []
+								for (const [key, item] of Object.entries(this.fileForm)) {
+									if (Array.isArray(item)) {
+										fileIds = fileIds.concat(item)
+									} else {
+										console.error('handleClick(): 上传文件数组类型不正确')
+									}
+								}
+								this.$set(this.dataForm, 'fileIds', fileIds)
+							}
+
+							// console.log('before send: ', this.dataForm)
+
+							this.$http({
+								url: this.$http.adornUrl(urls[btn.name].url),
+								method: btn.name === 'save' ? 'POST' : 'PUT',
+								data: { ...this.dataForm, ...urls[btn.name].extraFields }
+							})
+								.then(({ data: res }) => {
+									if (res && res.code === 0) {
+										this.$message({
+											message: i18n.t('prompt.success'),
+											// message: btn.name === 'save' ? i18n.t('prompt.success') : '更新成功!',
+											type: 'success',
+											duration: 1500,
+											onClose: () => {
+												this.$emit('refreshDataList')
+												this.visible = false
+											}
+										})
+									} else {
+										this.$message.error(res.msg)
+									}
+								})
+								.catch(err => {
+									this.$message({
+										message: err,
+										type: 'error',
+										duration: 2000
+									})
+								})
+						}
+					})
+					return
+				case 'reset':
+					for (const key of Object.keys(this.dataForm)) {
+						if (typeof this.dataForm[key] === 'string') {
+							this.dataForm[key] = ''
+						} else if (this.dataForm[key] instanceof Array) {
+							this.dataForm[key].splice(0)
+						} else {
+							this.dataForm[key] = null
+						}
+					}
+					break
+				case 'cancel':
+					this.handleClose()
+				// add more..
+			}
+		},
+
+		// LABEL: FILE_RELATED
+		handleUploadListUpdate(filelist, typeCode = 'DefaultTypeCode') {
+			// console.log('before handleUploadListUpdate(): ', JSON.parse(JSON.stringify(this.fileForm)))
+			// 设备类型 typeCode: EquipmentTypeFile
+			// 设备信息 typeCode: EquipmentInfoFile | EquipmentInfoImage
+
+			// 原先写法：直接更新 dataForm 对象，不适用于有多个上传组件的需求
+			// this.$set(
+			// 	this.dataForm,
+			// 	'fileIds',
+			// 	filelist.map(item => item.id)
+			// )
+			// console.log('handleUploadListUpdate(): ', this.dataForm)
+			// 现更改为分流写法
+			this.$set(
+				this.fileForm,
+				typeCode,
+				filelist.map(item => item.id)
+			)
+			// console.log('after handleUploadListUpdate(): ', this.fileForm)
+		},
+
+		handleClose() {
+			this.$emit('destory-dialog')
+			this.visible = false
+		}
+	}
+}
+</script>
+
+<style scoped>
+.super-flexible-dialog >>> .el-select,
+.super-flexible-dialog >>> .el-cascader {
+	width: 100%;
+}
+
+.super-flexible-dialog >>> ::-webkit-scrollbar {
+	width: 4px;
+	border-radius: 4px;
+	background: #fff;
+}
+
+.super-flexible-dialog >>> ::-webkit-scrollbar-thumb {
+	width: 4px;
+	border-radius: 4px;
+	background: #ccc;
+}
+
+.super-flexible-dialog >>> .hidden-input {
+	display: none;
+}
+</style>

src/components/base-table/components/cell-container.vue

@@ -0,0 +1,11 @@
+<template>
+	<div class="cell-container">
+		
+	</div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style></style>

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

@@ -0,0 +1,30 @@
+import i18n from '@/i18n'
+
+export default {
+  name: 'TableTextComponent',
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      // for i18n inject:
+      defaultText: i18n.t('viewdetail')
+    }
+  },
+  methods: {
+    emitClick() {
+      // console.log('inject data:' ,this.injectData)
+      this.$emit('emit-data', {
+        type: this.injectData.head?.actionName || 'view-detail-action',
+        data: this.injectData.head?.emitFullData ? this.injectData : this.injectData.id
+      })
+    }
+  },
+  render: function (h) {
+    // console.log('button content:', this.injectData)
+    return h('span', null, [h('el-button', { props: { type: 'text' }, style: { paddingLeft: 0 }, on: { click: this.emitClick } }, this.injectData.head?.buttonContent || this.defaultText)])
+  }
+}

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

@@ -0,0 +1,64 @@
+import i18n from '@/i18n'
+
+export default {
+  name: 'TableOperations',
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      btnTypes: {
+        add: 'primary',
+        delete: 'danger',
+        detail: 'info'
+        // add more...
+      },
+      colors: {
+        delete: '#FF5454',
+        preview: '#f09843',
+        design: '#99089f',
+        // 'view-trend': 'red'
+        // add more...
+      },
+      text: {
+        // TODO: i18n
+        edit: i18n.t('edit'),
+        detail: i18n.t('detail'),
+        delete: i18n.t('delete'),
+        viewAttr: i18n.t('viewattr'),
+        preview: i18n.t('preview'),
+        design: i18n.t('design'),
+        'view-trend': '查看趋势'
+        // add more...
+      }
+    }
+  },
+  methods: {
+    // 发射事件
+    emit(opt) {
+      let emitFull = false
+      let eventType = 'default'
+      let customField
+      if (typeof opt === 'object') {
+        eventType = opt.name
+        customField = opt.emitField || 'id'
+        emitFull = opt.emitFull || false
+      } else {
+        eventType = opt
+      }
+      this.$emit('emit-data', { type: eventType, data: emitFull ? this.injectData : customField ? this.injectData[customField] : this.injectData.id })
+    }
+  },
+  render: function (h) {
+    let btns = []
+    for (const optionStr of this.injectData.head?.options) {
+      const optObj = typeof optionStr === 'object'
+      // btns.push(h('el-button', { props: { type: this.btnTypes[optionStr] } }, optionStr))
+      btns.push(h('el-button', { props: { type: 'text' }, style: { color: optObj ? this.colors[optionStr.name] : this.colors[optionStr] || '#409EFF' }, on: { click: this.emit.bind(null, optionStr) } }, typeof optionStr === 'object' ? this.text[optionStr.name] : this.text[optionStr]))
+    }
+    return h('span', null, btns)
+  }
+}

src/components/base-table/components/table-head.vue

@@ -0,0 +1,40 @@
+<template>
+	<el-table-column
+		:label="opt.label ? opt.label : opt.name"
+		:prop="opt.prop || null"
+		:width="opt.width || null"
+		:min-width="opt.minWidth || null"
+		:fixed="opt.fixed || null"
+		:show-overflow-tooltip="opt.showOverflowTooltip || false"
+		filter-placement="top"
+		:align="opt.align || null"
+		v-bind="opt.more"
+	>
+		<template v-if="opt.prop" slot-scope="scope">
+			<component v-if="opt.subcomponent" :is="opt.subcomponent" :key="idx + 'sub'" :inject-data="{ ...scope.row, head: opt }" @emit-data="handleSubEmitData" />
+			<!-- 直接展示数据或应用过滤器 -->
+			<span v-else>{{ scope.row[opt.prop] | commonFilter(opt.filter) }}</span>
+		</template>
+		<!-- 递归 -->
+		<template v-if="!opt.prop && opt.children">
+			<TableHead v-for="(subhead, index) in opt.children" :key="'subhead' + index" :opt="subhead" />
+		</template>
+	</el-table-column>
+</template>
+
+<script>
+export default {
+	name: 'TableHead',
+	filters: {
+		commonFilter: (source, filterType = a => a) => {
+			return filterType(source)
+		}
+	},
+	props: {
+		opt: {
+			type: Object,
+			default: () => ({})
+		}
+	}
+}
+</script>

src/components/base-table/index.vue

@@ -0,0 +1,108 @@
+<template>
+	<div class="base-table">
+		<el-table
+			:data="data"
+			style="width: 100%"
+			fit
+			border
+			:header-cell-style="{ background: '#FAFAFA', color: '#606266', height: '40px' }"
+			:max-height="maxHeight"
+			:span-method="spanMethod || null"
+		>
+			<!-- 表格头定义 -->
+			<template v-for="(head, idx) in tableHeadConfigs">
+				<!-- 带type的表头 -->
+				<el-table-column
+					:key="idx"
+					v-if="head.type"
+					:type="head.type"
+					:label="head.label || head.name || ''"
+					: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>
+				<!-- 普通的表头 -->
+				<el-table-column
+					v-else
+					:key="idx + 'else'"
+					:label="head.label ? head.label : head.name"
+					:prop="head.prop || null"
+					:width="head.width || null"
+					:min-width="head.minWidth || null"
+					:fixed="head.fixed || null"
+					:show-overflow-tooltip="head.showOverflowTooltip || true"
+					:tooltip-effect="head.tooltipEffect || 'light'"
+					filter-placement="top"
+					:align="head.align || null"
+					v-bind="head.more"
+				>
+					<!-- 子组件 -->
+					<template v-if="head.prop" slot-scope="scope">
+						<component v-if="head.subcomponent" :is="head.subcomponent" :key="idx + 'sub'" :inject-data="{ ...scope.row, head }" @emit-data="handleSubEmitData" />
+						<!-- 直接展示数据或应用过滤器 -->
+						<span v-else>{{ scope.row[head.prop] | commonFilter(head.filter) }}</span>
+					</template>
+
+					<!-- 多级表头 -->
+					<template v-if="!head.prop && head.children">
+						<TableHead v-for="(subhead, subindex) in head.children" :key="'subhead-' + idx + '-subindex-' + subindex" :opt="subhead" />
+					</template>
+				</el-table-column>
+			</template>
+		</el-table>
+	</div>
+</template>
+
+<script>
+import TableHead from './components/table-head.vue'
+export default {
+	name: 'BaseTable',
+	props: {
+		tableHeadConfigs: {
+			type: Array,
+			default: () => []
+		},
+		data: {
+			type: Array,
+			default: () => []
+		},
+		maxHeight: {
+			type: Number,
+			default: 500
+		},
+		spanMethod: {
+			type: Function,
+			default: () => {
+				;() => [0, 0]
+			},
+			required: false
+		},
+		page: {
+			type: Number,
+			default: 1
+		},
+		size: {
+			type: Number,
+			default: 10
+		}
+	},
+	filters: {
+		commonFilter: (source, filterType = a => a) => {
+			return filterType(source)
+		}
+	},
+	data() {
+		return {}
+	},
+	methods: {
+		handleSubEmitData(payload) {
+			this.$emit('operate-event', payload)
+		}
+	},
+	components: { TableHead }
+}
+</script>

src/components/base-upload/index.vue

@@ -0,0 +1,213 @@
+<template>
+	<div class="base-upload" style="border-radius: 8px; margin-top: 48px; padding: 0; max-height: 500px;">
+		<el-upload
+			class="yd-upload"
+			action="#"
+			:http-request="handleUpload"
+			multiple
+			:file-list="fileList"
+			:on-preview="handleDownload"
+			:on-remove="handleRemove"
+			:before-upload="/.*?image.*?/i.test(extraParams.typeCode) ? validateImage : validateFile"
+		>
+			<!-- :before-remove="beforeRemove" -->
+			<!-- accept="image/*" -->
+			<!-- <el-upload class="yd-upload" :action="$http.adornUrl(url)" multiple name="files" :data="extraParams" :file-list="fileList" :on-remove="handleRemove" :before-remove="beforeRemove"> -->
+			<el-button :disabled="readOnly" type="primary">{{ buttonContent }}</el-button>
+			<div v-if="tip" slot="tip" class="el-upload__tip">{{ tip }}</div>
+		</el-upload>
+	</div>
+</template>
+
+<script>
+import { pick } from 'lodash/object'
+
+export default {
+	name: 'BaseUpload',
+	props: {
+		url: String,
+		buttonContent: String,
+		tip: {
+			type: String,
+			default: null
+		},
+		extraParams: {
+			type: Object,
+			default: () => ({})
+		},
+		uploaderInjectFileList: {
+			// 从外部传进来 fileList，用于展示文件列表用
+			type: Array,
+			default: () => []
+		},
+		readOnly: {
+			type: Boolean,
+			default: false
+		}
+	},
+	// inject: {
+	// 	parentDataForm: "_df"
+	// },
+	data() {
+		return {
+			fileList: []
+		}
+	},
+	mounted() {
+		this.fileList.splice(0)
+
+		this.$watch('uploaderInjectFileList', function(val) {
+			if (val && val.length) {
+				// 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)
+		})
+
+		// if (this.parentDataForm) {
+		// 	console.log('parent dataform: ', this.parentDataForm)
+		// }
+	},
+	methods: {
+		/** 自定义上传行为 */
+		handleUpload(file) {
+			const formData = new FormData()
+			let files = file.file
+			formData.append('files', files)
+
+			this.$http({
+				url: this.$http.adornUrl(this.url),
+				method: 'POST',
+				data: formData,
+				params: {
+					typeCode: this.extraParams.typeCode
+				}
+			}).then(({ data: res }) => {
+				if (res && res.code === 0) {
+					res.data.forEach(item => {
+						const ext = item.fileUrl.split('.').reverse()[0]
+						const name = `${item.fileName}.${ext}`
+						this.fileList.push({ ...pick(item, ['id', 'fileName', 'typeCode']), name })
+					})
+					// TODO: 在新增和更新阶段，带入 fileIds[] 数组给后端，就可完成文件和设备类型的绑定、删除操作
+					this.$emit('uploader-update-filelist', this.fileList)
+				}
+			})
+		},
+
+		/** 大小验证，由配置文件开启 */
+		validateFile(file) {
+			const isRightSize = file.size / 1024 / 1024 < 2
+			if (!isRightSize) {
+				// this.$message.error(this.$t('upload.picSizeAlarm'))
+				this.$message.error('文件不应超过 2MB')
+			}
+			return isRightSize
+		},
+
+		/** 图片验证，由配置文件开启 */
+		validateImage(file) {
+			// console.log('[*] 验证图片')
+
+			const isRightSize = file.size / 1024 / 1024 < 2
+			if (!isRightSize) {
+				this.$message.error('文件不应超过 2MB')
+				// this.$message.error(this.$t('upload.picSizeAlarm'))
+			}
+
+			const isAccept = new RegExp('image/*').test(file.type)
+			if (!isAccept) {
+				// this.$message.error(this.$t('upload.picAlarm'))
+				this.$message.error('只允许上传图片')
+			}
+			return isRightSize && isAccept
+		},
+
+		/** 点击下载 */
+		handleDownload({ id: fileId, name: fileName }) {
+			const type = {
+				download: 1,
+				preview: 0
+			}
+			this.$http({
+				url: this.$http.adornUrl('/monitoring/attachment/downloadFile'),
+				method: 'get',
+				params: this.$http.adornParams({
+					attachmentId: fileId,
+					type: type.download
+					// fileName,
+					// outputQuality,
+					// scale
+				}),
+				responseType: 'blob'
+			}).then(({ data: res }) => {
+				const blob = new Blob([res])
+				// console.log('blob', blob)
+				if ('download' in document.createElement('a')) {
+					const alink = document.createElement('a')
+					// console.log('filename: ', fileName)
+					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)
+				}
+			})
+		},
+
+		// beforeRemove(file, filelist) {
+		// 	return this.$confirm(`确定移除 ${file.name}?`)
+		// },
+
+		handleRemove(file, filelist) {
+			// 把更新后的 fileList 传递出去
+			this.$emit('uploader-update-filelist', filelist)
+		}
+	}
+}
+</script>
+
+<style scoped>
+.base-upload >>> .yd-upload {
+	margin-bottom: 20px;
+}
+
+/* .base-upload >>> .el-button {
+	display: block;
+	width: 200px;
+	position: relative;
+	left: -50px;
+} */
+
+/* .base-upload >>> .el-upload--text {
+	width: 100px;
+	position: relative;
+	left: -100px;
+} */
+
+.base-upload >>> .el-upload__tip {
+	margin-top: 0;
+	margin-left: 5px;
+}
+
+.base-upload {
+	display: flex;
+}
+
+.yd-upload {
+	/* background-color: #efefef; */
+	flex-grow: 1;
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+}
+</style>

src/components/ren-dept-tree/src/ren-dept-tree.vue

@@ -76,7 +76,7 @@ export default {
       return data.name.indexOf(value) !== -1
     },
     getDeptList (id) {
-      return this.$http.get('/sys/dept/list').then(({ data: res }) => {
+      return this.$http.get(this.$http.adornUrl('/sys/dept/list')).then(({ data: res }) => {
         if (res.code !== 0) {
           return this.$message.error(res.msg)
         }

src/components/ren-region-tree/src/ren-region-tree.vue

@@ -90,7 +90,7 @@ export default {
       return data.name.indexOf(value) !== -1
     },
     getDataList (id) {
-      return this.$http.get('/sys/region/tree').then(({ data: res }) => {
+      return this.$http.get(this.$http.adornUrl('/sys/region/tree')).then(({ data: res }) => {
         if (res.code !== 0) {
           return this.$message.error(res.msg)
         }

src/components/small-title/index.vue

@@ -0,0 +1,68 @@
+<!--
+ * @Author: lb
+ * @Date: 2022-05-18 16:00:00
+ * @LastEditors: lb
+ * @LastEditTime: 2022-05-18 16:00:00
+ * @Description:
+-->
+<template>
+	<div :class="[className, { 'p-0': noPadding }]">
+		<slot />
+	</div>
+</template>
+
+<script>
+export default {
+	props: {
+		size: {
+			// 取值范围:  xl lg md sm
+			type: String,
+			default: 'de',
+			validator: function(val) {
+				return ['xl', 'lg', 'de', 'md', 'sm'].indexOf(val) !== -1
+			}
+		},
+		noPadding: {
+			type: Boolean,
+			default: false
+		}
+	},
+	computed: {
+		className: function() {
+			return `${this.size}-title`
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+$pxls: (xl, 28px) (lg, 24px) (de, 22px) (md, 18px) (sm, 16px);
+$mgr: 6px;
+@each $size, $height in $pxls {
+	.#{$size}-title {
+		padding: 8px 0;
+		font-size: $height;
+		line-height: $height;
+		color: #000;
+		font-weight: 500;
+		// font-family: '微软雅黑', 'Microsoft YaHei', Arial, Helvetica, sans-serif;
+		font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
+
+		&::before {
+			content: '';
+			display: inline-block;
+			vertical-align: top;
+			width: 4px;
+			height: $height + 2px;
+			border-radius: 1px;
+			margin-right: $mgr;
+			// background-color: #0b58ff;
+			background-color: #409EFF;
+		}
+	}
+}
+
+.p-0 {
+	padding: 0;
+}
+</style>

src/element-ui/theme-variables.scss

@@ -16,7 +16,8 @@ $--color-transition-base: color .2s cubic-bezier(.645,.045,.355,1) !default;
 /* Color
 -------------------------- */
 /// color|1|Brand Color|0
-$--color-primary: #409EFF !default;
+// $--color-primary: #409EFF !default;
+$--color-primary: #001529 !default;
 /// color|1|Background Color|4
 $--color-white: #FFFFFF !default;
 /// color|1|Background Color|4

src/i18n/en.js

@@ -0,0 +1,624 @@
+const t = {}
+
+t.loading = 'Loading...'
+t.createTime = 'Create Time'
+
+t.brand = {}
+t.brand.lg = 'Deep Processing SCADA Platform'
+t.brand.mini = 'SCADA'
+
+t.routes = {}
+t.routes['产品池'] = 'Products Pool'
+t.routes['基本资料'] = 'Basic Data'
+t.routes['设备数采'] = 'Equipment PLC'
+t.routes['厂务管理'] = 'Factory Management'
+t.routes['报表管理'] = 'Report Management'
+t.routes['质量管理'] = 'Quality Management'
+t.routes['权限管理'] = 'Permission Management'
+t.routes['系统设置'] = 'System Settings'
+t.routes['日志管理'] = 'Log Management'
+t.routes['数据分析'] = 'Data Analysis'
+
+// 二级
+t.routes['厂务'] = 'Factory Affair'
+t.routes['设备'] = 'Equipment'
+t.routes['字典管理'] = 'Dict Management'
+t.routes['PLC信息'] = 'PLC'
+t.routes['设备与PLC关联配置'] = 'Relations between plc & equipments'
+t.routes['设备生产实时数据'] = 'Realtime Equipment Data'
+t.routes['产线生产实时数据'] = 'Realtime Productline Data'
+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'
+t.routes['角色管理'] = 'Role Management'
+t.routes['菜单管理'] = 'Menu Management'
+t.routes['参数管理'] = 'Params Management'
+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'
+t.routes['产线'] = 'Product Lines'
+t.routes['工段'] = 'Work Sections'
+t.routes['设备类型'] = 'Equipment Types'
+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'
+t.deleteBatch = 'Delete Batch'
+t.update = 'Update'
+t.query = 'Search'
+t.export = 'Export'
+t.handle = 'Operations'
+t.confirm = 'Confirm'
+t.cancel = 'Cancel'
+t.clear = 'Clear'
+t.logout = 'Logout'
+t.manage = 'Handle'
+t.createDate = 'Create Date'
+t.keyword = 'Keyword(s): '
+t.choose = 'Please Choose '
+t.remark = 'Remark'
+t.delMark = 'Delete Mark '
+t.isvalid = 'is valid'
+t.available = 'available'
+t.unavailable = 'unavailable'
+t.alert = 'alert'
+t.creator = 'Creator'
+t.creatorName = 'Creator\'s name'
+t.updator = 'Updator'
+t.updatorName = 'Updator\'s name'
+t.updateTime = 'Update Time'
+t.version = 'Version'
+t.search = 'Search'
+t.countPerPage = '每页数' // ?
+t.currentPage = '当前页' // ?
+t.fetchList = '获取数据列表' // ?
+t.multi = '多选' // ?
+t.do = '进行' // ?
+t.submit = '表单提交' // ?
+t.desc = 'Description'
+t.disable = 'Disable'
+t.equipment = 'Equipment'
+t.enabled = 'Enabled'
+t.cannotempty = 'can\'t be empty'
+t.parameter = 'Parameters'
+t.enable = 'Enable'
+t.index = 'Index'
+t.relation = '关联'
+t.fetchInfo = 'Fetch Info'
+t.name = 'Name'
+t.code = 'Code'
+t.attrName = 'Attribute name'
+t.attrValue = 'Attribute value'
+t.unit = 'Unit'
+t.table = 'Table'
+t.table2 = 'Table'
+t.downloadurl = 'Download Url'
+t.recordTime = 'Record Time'
+t.notCollect = 'No'
+t.collect = 'Yes'
+t.required = 'Required'
+t.paramUrl = 'Parameter url'
+t.enname = 'English Name'
+t.collectOrNot = 'Collect or not'
+t.min = 'Min Value'
+t.max = 'Max Value'
+t.status = 'Status'
+t.normal = 'Normal'
+t.addr = 'Address'
+t.planStop = 'Plan to stop'
+t.startTime = 'Start Time'
+t.endTime = 'End Time'
+t.today = 'Today'
+
+t.graph = 'Graph'
+t.category = 'Category'
+t.categoryName = 'Category Name'
+t.categoryCode = 'Category Code'
+t.rate = 'Rate'
+t.link = 'Link Url'
+t.refresh = 'Refresh'
+t.abbr = 'Abbreviation'
+t.detail = 'Details'
+t.viewdetail = 'Details'
+t.viewattr = 'View Attributions'
+t.edit = 'Edit'
+t.source = 'Source'
+t.auto = 'Auto'
+t.manual = 'Manually'
+t.loaddone = 'Loaded'
+t.produceTime = 'Date of manufacture'
+t.enterTime = 'Enter Time'
+t.manufacturer = 'Manufacturer'
+t.success = 'success!'
+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.'
+t.errors.numsection = 'There are {num} sections on this product line.'
+t.errors.nodata = 'Error, no data available!'
+
+t.hints = {}
+t.hints.input = 'Please input '
+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.factory = {}
+t.factory.title = 'Factory'
+t.factory.name = 'Factory Name'
+t.factory.code = 'Factory Code'
+
+t.prod = {}
+t.prod.id = 'Product ID'
+t.prod.name = 'Product Name'
+t.prod.code = 'Product Code'
+t.prod.type = 'Product Type'
+t.prod.area = 'Area'
+t.prod.spec = 'Product Specification'
+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 (s)'
+t.prod.processTimeHints = 'Please input processing time'
+t.prod.relatedPid = 'Related Product'
+
+t.alarm = {}
+t.alarm.name = 'Alarm'
+t.alarm.info = 'Alarm Informations'
+t.alarm.view = 'View Alarm'
+t.alarm.eq = 'Alarm Equipment'
+t.alarm.type = 'Alarm Type'
+t.alarm.code = 'Alarm Code'
+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'
+t.report.det = 'Report Content'
+t.report.type = 'Report Type'
+t.report.code = 'Report Code'
+t.report.lnk = 'Report Url'
+
+t.inspect = {}
+t.inspect.type = 'Inspection Type'
+t.inspect.code = 'Inspection Code'
+t.inspect.det = 'Inspection Details'
+t.inspect.detcode = 'Inspection Content Code'
+t.inspect.people = 'Inspector'
+t.inspect.time = 'Inspection Time'
+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 contents in each line'
+t.inspect.inTotal = 'Up Sum'
+t.inspect.outTotal = 'Down Sum'
+t.inspect.checkTotal = 'Total Inspections'
+t.inspect.rate = 'Rate'
+t.inspect.typeCount = 'Data of inspection types'
+
+
+t.realtime = {}
+t.realtime.eq = 'Realtime data of equipments'
+t.realtime.pl = 'Realtime data of product lines'
+t.realtime.inspect = 'Realtime data of quality inspections'
+t.realtime.in = 'in'
+t.realtime.out = 'out'
+t.realtime.data = 'scrap'
+t.realtime.num = 'scrap quantity'
+t.realtime.rate = 'scrap rate'
+t.realtime.total = 'total production'
+t.realtime.goodrate = 'Passed Rate'
+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 = {}
+t.ws.title = 'Work Section'
+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 = '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'
+t.ws.eqbind = 'Binded Equipment(s)'
+t.ws.belong = 'Product Line'
+
+t.file = {}
+t.file.title = 'File'
+t.file.name = 'File Name'
+t.file.code = 'File Code'
+t.file.typeName = 'File Type'
+t.file.typeCode = 'File Type Code'
+
+t.eq = {}
+t.eq.title = 'Equipment'
+t.eq.id = 'Equipment ID'
+t.eq.name = 'Equipment Name'
+t.eq.code = 'Equipment Code'
+t.eq.type = 'Equipment Type'
+t.eq.grade = 'Specification of equipment'
+t.eq.group = 'Equipment Group'
+t.eq.groupname = 'Group Name'
+t.eq.groupcode = 'Group Code'
+t.eq.excode = 'External Code'
+t.eq.input = 'Input Device'
+t.eq.output = 'Output Device'
+t.eq.tvalue = 'Device\'s TT Value'
+t.eq.processingTime = 'Processing Time (s)'
+t.eq.dtype = 'Data source'
+t.eq.dtypenone = 'none'
+t.eq.dtypeinput = 'Input Data Device'
+t.eq.dtypeoutput = 'Output Data Device'
+t.eq.upload = 'Upload'
+t.eq.image = 'Equipment Pictures'
+t.eq.viewattr = 'Equipment Attributions'
+t.eq.plcbarcode = 'PLC Bar Code'
+t.eq.plccode = 'PLC Code'
+t.eq.plcname = 'PLC Name'
+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 = {}
+t.pl.title = 'Product Line'
+t.pl.id = 'Product Line ID'
+t.pl.name = 'Product Line Name'
+t.pl.code = 'Product Line Code'
+t.pl.status = 'Product Line Status'
+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}?'
+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.'
+t.validate.format = '{attr} has a wrong format.'
+
+t.upload = {}
+t.upload.title = 'Upload Assets'
+t.upload.text = '将文件拖到此处，或<em>点击上传</em>'
+t.upload.tip = 'Only support files with format: {format}'
+t.upload.button = 'upload'
+
+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.'
+
+t.updatePassword = {}
+t.updatePassword.title = 'Update Password'
+t.updatePassword.username = 'Username'
+t.updatePassword.password = 'Current Password'
+t.updatePassword.newPassword = 'New Password'
+t.updatePassword.confirmPassword = 'Confirm Password'
+t.updatePassword.validate = {}
+t.updatePassword.validate.confirmPassword = 'The two passwords are different. Please check again.'
+
+t.contentTabs = {}
+t.contentTabs.closeCurrent = 'Close current tab'
+t.contentTabs.closeOther = 'Close other tabs'
+t.contentTabs.closeAll = 'Close all tabs'
+
+/* 页面 */
+t.notFound = {}
+t.notFound.desc = 'Sorry! The page you\'re looking is missing.'
+t.notFound.back = 'Back'
+t.notFound.home = 'Home Page'
+
+t.login = {}
+t.login.title = 'Login'
+t.login.username = 'Username'
+t.login.password = 'Password'
+t.login.captcha = 'Captcha'
+t.login.demo = 'Demo'
+t.login.copyright = 'Copyright @Intelligent Automation Research Institute Co., Ltd  Version: 1.0'
+t.login.warning = 'Already Login!'
+
+t.schedule = {}
+t.schedule.beanName = 'Bean Name'
+t.schedule.beanNameTips = 'spring bean name, eg: testTask'
+t.schedule.pauseBatch = 'Pause'
+t.schedule.resumeBatch = 'Resume'
+t.schedule.runBatch = 'Run'
+t.schedule.log = 'Log List'
+t.schedule.params = 'Parameters'
+t.schedule.cronExpression = 'cron expression'
+t.schedule.cronExpressionTips = 'ex: 0 0 12 * * ?'
+t.schedule.remark = 'Remark'
+t.schedule.status = 'Status'
+t.schedule.status0 = 'Pause'
+t.schedule.status1 = 'Normal'
+t.schedule.statusLog0 = 'Failed'
+t.schedule.statusLog1 = 'Success'
+t.schedule.pause = 'Pause'
+t.schedule.resume = 'Resume'
+t.schedule.run = 'Excute'
+t.schedule.jobId = 'Job ID'
+t.schedule.times = 'Time Cost (ms)'
+t.schedule.createDate = 'Executed Tune' // ?
+
+t.oss = {}
+t.oss.config = '云存储配置'
+t.oss.upload = '上传文件'
+t.oss.url = 'URL地址'
+t.oss.createDate = 'Create Time'
+t.oss.type = '类型'
+t.oss.type1 = '七牛'
+t.oss.type2 = '阿里云'
+t.oss.type3 = '腾讯云'
+t.oss.qiniuDomain = '域名'
+t.oss.qiniuDomainTips = '七牛绑定的域名'
+t.oss.qiniuPrefix = '路径前缀'
+t.oss.qiniuPrefixTips = '不设置默认为空'
+t.oss.qiniuAccessKey = 'AccessKey'
+t.oss.qiniuAccessKeyTips = '七牛AccessKey'
+t.oss.qiniuSecretKey = 'SecretKey'
+t.oss.qiniuSecretKeyTips = '七牛SecretKey'
+t.oss.qiniuBucketName = '空间名'
+t.oss.qiniuBucketNameTips = '七牛存储空间名'
+t.oss.aliyunDomain = '域名'
+t.oss.aliyunDomainTips = '阿里云绑定的域名，如：http://cdn.renren.io'
+t.oss.aliyunPrefix = '路径前缀'
+t.oss.aliyunPrefixTips = '不设置默认为空'
+t.oss.aliyunEndPoint = 'EndPoint'
+t.oss.aliyunEndPointTips = '阿里云EndPoint'
+t.oss.aliyunAccessKeyId = 'AccessKeyId'
+t.oss.aliyunAccessKeyIdTips = '阿里云AccessKeyId'
+t.oss.aliyunAccessKeySecret = 'AccessKeySecret'
+t.oss.aliyunAccessKeySecretTips = '阿里云AccessKeySecret'
+t.oss.aliyunBucketName = 'BucketName'
+t.oss.aliyunBucketNameTips = '阿里云BucketName'
+t.oss.qcloudDomain = '域名'
+t.oss.qcloudDomainTips = '腾讯云绑定的域名'
+t.oss.qcloudPrefix = '路径前缀'
+t.oss.qcloudPrefixTips = '不设置默认为空'
+t.oss.qcloudAppId = 'AppId'
+t.oss.qcloudAppIdTips = '腾讯云AppId'
+t.oss.qcloudSecretId = 'SecretId'
+t.oss.qcloudSecretIdTips = '腾讯云SecretId'
+t.oss.qcloudSecretKey = 'SecretKey'
+t.oss.qcloudSecretKeyTips = '腾讯云SecretKey'
+t.oss.qcloudBucketName = 'BucketName'
+t.oss.qcloudBucketNameTips = '腾讯云BucketName'
+t.oss.qcloudRegion = '所属地区'
+t.oss.qcloudRegionTips = '请选择'
+t.oss.qcloudRegionBeijing1 = '北京一区（华北）'
+t.oss.qcloudRegionBeijing = '北京'
+t.oss.qcloudRegionShanghai = '上海（华东）'
+t.oss.qcloudRegionGuangzhou = '广州（华南）'
+t.oss.qcloudRegionChengdu = '成都（西南）'
+t.oss.qcloudRegionChongqing = '重庆'
+t.oss.qcloudRegionSingapore = '新加坡'
+t.oss.qcloudRegionHongkong = '香港'
+t.oss.qcloudRegionToronto = '多伦多'
+t.oss.qcloudRegionFrankfurt = '法兰克福'
+
+t.dept = {}
+t.dept.name = 'Department Name'
+t.dept.parentName = 'Superior Department'
+t.dept.sort = 'Sort'
+t.dept.parentNameDefault = 'First tier department'
+t.dept.chooseerror = 'Please select a department'
+t.dept.title = 'Department Selection'
+
+t.dict = {}
+t.dict.dictName = 'Dictionary Name'
+t.dict.dictType = 'Dictionary Type'
+t.dict.dictLabel = 'Dictionary Label'
+t.dict.dictValue = 'Dictionary Value'
+t.dict.sort = 'Sort'
+t.dict.remark = 'Remark'
+t.dict.createDate = 'Create Time'
+
+t.logError = {}
+t.logError.requestUri = 'Request URI'
+t.logError.requestMethod = 'Request Method'
+t.logError.requestParams = 'Request Parameters'
+t.logError.ip = 'IP'
+t.logError.userAgent = 'User Agent'
+t.logError.createDate = 'Create Time'
+t.logError.errorInfo = 'Exceptions'
+
+t.logLogin = {}
+t.logLogin.creatorName = 'User Name'
+t.logLogin.status = 'Status'
+t.logLogin.status0 = 'Failed'
+t.logLogin.status1 = 'Success'
+t.logLogin.status2 = 'Account has been locked'
+t.logLogin.operation = 'Operation Type'
+t.logLogin.operation0 = 'Login'
+t.logLogin.operation1 = 'Logout'
+t.logLogin.ip = 'IP'
+t.logLogin.userAgent = 'User-Agent'
+t.logLogin.createDate = 'Create Time'
+
+t.logOperation = {}
+t.logOperation.status = 'Status'
+t.logOperation.status0 = 'Failed'
+t.logOperation.status1 = 'Success'
+t.logOperation.creatorName = 'User Name'
+t.logOperation.operation = 'User Operations'
+t.logOperation.requestUri = 'Request URI'
+t.logOperation.requestMethod = 'Request Method'
+t.logOperation.requestParams = 'Request Parameters'
+t.logOperation.requestTime = 'Request Duration'
+t.logOperation.ip = 'IP'
+t.logOperation.userAgent = 'User-Agent'
+t.logOperation.createDate = 'Create Time'
+
+t.menu = {}
+t.menu.name = 'Name'
+t.menu.icon = 'Icons'
+t.menu.type = 'Type'
+t.menu.type0 = 'Menu'
+t.menu.type1 = 'Button'
+t.menu.sort = 'Sort'
+t.menu.url = 'Route'
+t.menu.permissions = '授权标识'
+t.menu.permissionsTips = '多个用逗号分隔，如：sys:menu:save,sys:menu:update'
+t.menu.parentName = '上级菜单'
+t.menu.parentNameDefault = 'First tier menu'
+t.menu.resource = '授权资源'
+t.menu.resourceUrl = '资源URL'
+t.menu.resourceMethod = 'Request methods'
+t.menu.resourceAddItem = '添加一项'
+
+t.params = {}
+t.params.name = 'Parameter Name'
+t.params.code = 'Parameter Code'
+t.params.paramCode = 'Parameter Code'
+t.params.paramValue = 'Parameter Value'
+t.params.paramStdValue = 'Standard Parameter Code'
+t.params.plctitle = 'PLC Collection Parameters'
+t.params.plcid = 'PLC连接表ID'
+t.params.remark = 'Remark'
+
+t.role = {}
+t.role.name = 'Role Name'
+t.role.remark = 'Remark'
+t.role.createDate = 'Create Time'
+t.role.menuList = 'Menu authorization' // ?
+t.role.deptList = 'Data authorization' // ?
+
+t.user = {}
+t.user.username = 'User Name'
+t.user.deptName = 'Department'
+t.user.email = 'Email'
+t.user.mobile = 'Phone'
+t.user.status = 'Status'
+t.user.status0 = 'Pause' // ?
+t.user.status1 = 'Normal'
+t.user.createDate = 'Create Time'
+t.user.password = 'Password'
+t.user.confirmPassword = 'Confirm Password'
+t.user.realName = 'Actual Name'
+t.user.gender = 'Gender'
+t.user.gender0 = 'male'
+t.user.gender1 = 'female'
+t.user.gender2 = 'secret'
+t.user.roleIdList = 'Role Configurations'
+t.user.validate = {}
+t.user.validate.confirmPassword = 'The two passwords are different. Please check again.'
+t.user.select = 'Select an user'
+t.user.selecterror = 'Pick up a record'
+
+export default t

src/i18n/index.js

@@ -2,8 +2,9 @@ import Vue from 'vue'
 import VueI18n from 'vue-i18n'
 import Cookies from 'js-cookie'
 import zhCNLocale from 'element-ui/lib/locale/lang/zh-CN'
+import enLocale from 'element-ui/lib/locale/lang/en'
 import zhCN from './zh-CN'
-
+import en from './en'
 Vue.use(VueI18n)
 
 export const messages = {
@@ -11,10 +12,36 @@ export const messages = {
     '_lang': '简体中文',
     ...zhCN,
     ...zhCNLocale
+  },
+  'en': {
+    '_lang': 'English',
+    ...en,
+    ...enLocale
   }
 }
 
+export function getLanguage() {
+  if (Cookies.get('language')) {
+    return Cookies.get('language')
+  }
+
+  // if has not choose language
+  const language = (navigator.language || navigator.browserLanguage)
+
+  const locales = Object.keys(messages)
+  for (const locale of locales) {
+    if (language.indexOf(locale) > -1) {
+      Cookies.set('language', locale)
+      return locale
+    }
+  }
+  Cookies.set('language', 'en')
+  return 'en'
+
+}
+
 export default new VueI18n({
-  locale: Cookies.get('language') || 'zh-CN',
+  // locale: Cookies.get('language') || 'zh-CN',
+  locale: getLanguage(), // 先默认中文
   messages
 })

src/i18n/zh-CN.js

@@ -1,39 +1,394 @@
 const t = {}
 
 t.loading = '加载中...'
+t.createTime = '添加时间'
 
 t.brand = {}
-t.brand.lg = '人人权限系统'
+t.brand.lg = '深加工SCADA平台'
-t.brand.mini = '人人'
+t.brand.mini = 'SCADA'
 
-t.add = '新增'
+t.routes = {}
-t.delete = '删除'
+// 一级
-t.deleteBatch = '删除'
+t.routes['产品池'] = '产品池'
-t.update = '修改'
+t.routes['基本资料'] = '基本资料'
-t.query = '查询'
+t.routes['设备数采'] = '设备数采'
-t.export = '导出'
+t.routes['厂务管理'] = '厂务管理'
-t.handle = '操作'
+t.routes['报表管理'] = '报表管理'
-t.confirm = '确定'
+t.routes['质量管理'] = '质量管理'
-t.cancel = '取消'
+t.routes['权限管理'] = '权限管理'
-t.clear = '清除'
+t.routes['系统设置'] = '系统设置'
-t.logout = '退出'
+t.routes['日志管理'] = '日志管理'
-t.manage = '处理'
+t.routes['数据分析'] = '数据分析'
-t.createDate = '创建时间'
+
-t.keyword = '关键字：'
+// 二级
-t.choose = '请选择'
+t.routes['厂务'] = '厂务'
+t.routes['设备'] = '设备'
+t.routes['字典管理'] = '字典管理'
+t.routes['PLC信息'] = 'PLC信息'
+t.routes['设备与PLC关联配置'] = '设备与PLC关联配置'  // ?
+t.routes['设备生产实时数据'] = '设备生产实时数据'
+t.routes['产线生产实时数据'] = '产线生产实时数据'
+t.routes['质量检查实时数据'] = '质量检查实时数据'
+t.routes['报表总览'] = '报表总览'
+t.routes['报表分类'] = '报表分类'
+t.routes['报表详情'] = '报表详情'
+t.routes['报表设计'] = '报表设计'
+t.routes['报表预览'] = '报表预览'
+t.routes['质量检测基础数据'] = '质量检测基础数据'
+t.routes['当前检测数据'] = '当前检测数据'
+t.routes['检测统计数据'] = '检测统计数据'
+t.routes['质量检查信息记录'] = '质量检查信息记录'
+t.routes['用户管理'] = '用户管理'
+t.routes['部门管理'] = '部门管理'
+t.routes['角色管理'] = '角色管理'
+t.routes['菜单管理'] = '菜单管理'
+t.routes['参数管理'] = '参数管理'
+t.routes['定时任务'] = '定时任务'
+t.routes['文件上传'] = '文件上传'
+t.routes['登录日志'] = '登录日志'
+t.routes['操作日志'] = '操作日志'
+t.routes['设备效率分析'] = '设备效率分析'
+t.routes['设备异常分析'] = '设备异常分析'
+t.routes['设备状态时序图'] = '设备状态时序图'
+
+// 三级
+t.routes['工厂'] = '工厂'
+t.routes['产线'] = '产线'
+t.routes['工段'] = '工段'
+t.routes['设备类型'] = '设备类型'
+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
+t.deleteBatch = '批量删除' // 1
+t.update = '修改' // 1
+t.query = '查询' // 1
+t.export = '导出' // 1
+t.handle = '操作' // 1
+t.confirm = '确定' // 1
+t.cancel = '取消' // 1
+t.clear = '清除' // 1
+t.logout = '退出' // 1
+t.manage = '处理' // 1
+t.createDate = '创建时间' // 1
+t.keyword = '关键字：' // 1
+t.choose = '请选择' // 1
+t.remark = '备注' // 1
+t.delMark = '删除标志' // 0
+t.isvalid = '是否有效' // 0
+t.available = '可用' // 0
+t.unavailable = '不可用' // 0
+t.alert = '弹窗' // 0
+t.creator = '创建人' // 1
+t.creatorName = '创建人姓名' // 1
+t.updator = '更新人' // 1
+t.updatorName = '更新人姓名' // 1
+t.updateTime = '更新时间'
+t.version = '版本号' // 1
+t.search = '查询' // 1
+t.countPerPage = '每页数' // ?
+t.currentPage = '当前页' // ?
+t.fetchList = '获取数据列表' // ?
+t.multi = '多选' // ?
+t.do = '进行' // ?
+t.submit = '表单提交' // ?
+t.desc = '描述' // 1
+t.disable = '停用' // 1
+t.equipment = '设备' // 1
+t.enabled = '启用状态' // ?
+t.cannotempty = '不能为空' // ?
+t.parameter = '参数名' // 1
+t.enable = '启用' // 1
+t.index = '序号' // 1
+t.relation = '关联' // ?
+t.fetchInfo = '获取信息' // ?
+t.name = '名称' // 1
+t.code = '编码' // 1
+t.attrName = '属性名称' // 1
+t.attrValue = '属性值' // 1
+t.unit = '单位' // 1
+t.table = '表' // 1
+t.table2 = '表格' // 1
+t.downloadurl = '下载地址' // 1
+t.recordTime = '记录时间' // 1
+t.notCollect = '不采集' // 1
+t.collect = '采集' // 1
+t.required = '必填' // 1
+t.paramUrl = '参数地址' // 1
+t.enname = '英文名称' // 1
+t.collectOrNot = '是否采集' // 1
+t.min = '最小值' // 1
+t.max = '最大值' // 1
+t.status = '状态' // 1
+t.normal = '正常' // ?
+t.addr = '地址' // 1
+t.planStop = '计划停机' // ?
+t.startTime = '开始时间' // 1
+t.endTime = '结束时间' // 1
+t.to = '至' // 1
+t.today = '今天' // 1
+
+t.graph = '图形'
+t.category = '分类'
+t.categoryName = '分类名称'
+t.categoryCode = '分类编码'
+t.rate = '比例'
+t.link = '链接地址'
+t.refresh = '刷新'
+t.abbr = '缩写'
+t.detail = '详情'
+t.viewdetail = '查看详情'
+t.viewattr = '查看属性'
+t.edit = '编辑'
+t.source = '来源'
+t.auto = '自动'
+t.manual = '手动'
+t.loaddone = '加载完成'
+t.produceTime = '生产日期'
+t.enterTime = '进厂日期'
+t.manufacturer = '制造商'
+t.success = '修改成功!'
+t.all = '全部'
+t.reset = '重置'
+t.preview = '预览'
+t.design = '设计'
+t.timetype = '时间类型'
+t.reftimerange = '按时间段'
+t.refdate = '按日期'
+t.hour = '小时'
+
+t.errors = {}
+t.errors.nosection = '该产线没有工段'
+t.errors.numsection = '该产线有{num}条工段'
+t.errors.nodata = '没有查询到相关数据!'
+
+t.hints = {}
+t.hints.input = '请输入'
+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.factory = {}
+t.factory.title = '工厂'
+t.factory.name = '工厂名称'
+t.factory.code = '工厂编码'
+
+t.prod = {}
+t.prod.id = '产品ID'
+t.prod.name = '产品名称'
+t.prod.code = '产品编码'
+t.prod.type = '产品类型'
+t.prod.area = '单位平方数'
+t.prod.spec = '规格'
+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.processTime = '产线完成单位产品用时 (s)'
+t.prod.processTimeHints = '请输入完成单位产品用时'
+// t.prod.processTimeHints = '请输入加工时间'
+t.prod.relatedPid = '关联产品'
+
+t.alarm = {}
+t.alarm.name = '报警'
+t.alarm.info = '报警信息'
+t.alarm.view = '查看报警'
+t.alarm.eq = '报警设备'
+t.alarm.type = '报警类型'
+t.alarm.code = '报警编码'
+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 = '报表名称'
+t.report.det = '报表内容'
+t.report.type = '报表分类'
+t.report.code = '报表编码'
+t.report.lnk = '链接地址'
+
+t.inspect = {}
+t.inspect.type = '检测类型'
+t.inspect.code = '检测编码'
+t.inspect.det = '检测内容'
+t.inspect.detcode = '内容编码'
+t.inspect.people = '检测人员'
+t.inspect.time = '检测时间'
+t.inspect.typetotal = '检测类型总数'
+t.inspect.typename = '检测类型名称'
+t.inspect.typecode = '检测类型编码'
+t.inspect.ioTotal = '上下片及检测总数统计'
+t.inspect.plTotal = '各产线检测内容统计'
+t.inspect.inTotal = '上片总数'
+t.inspect.outTotal = '下片总数'
+t.inspect.checkTotal = '检测总数'
+t.inspect.rate = '比例'
+t.inspect.typeCount = '检测类型统计数据'
+
+
+t.realtime = {}
+t.realtime.eq = '设备生产实时数据'
+t.realtime.pl = '产线生产实时数据'
+t.realtime.inspect = '质量检查实时数据'
+t.realtime.in = '进数据'
+t.realtime.out = '出数据'
+t.realtime.data = '报废数据'
+t.realtime.num = '报废数量'
+t.realtime.rate = '报废比例'
+t.realtime.total = '总产量'
+t.realtime.goodrate = '良品率'
+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.refresh = '刷新数据'
+
+
+t.ws = {}
+t.ws.title = '工段'
+t.ws.id = '工段ID'
+t.ws.name = '工段名称'
+t.ws.code = '工段编码'
+t.ws.binded = '已绑定的设备'
+t.ws.unbind = '设备名称'
+t.ws.eqbindplaceholder = '选择一个设备进行绑定'
+t.ws.sort = '工段排序'
+t.ws.setorder = '请输入工段中设备的顺序'
+t.ws.bind = '绑定'
+t.ws.eqbind = '设备绑定'
+t.ws.belong = '所属产线'
+
+t.file = {}
+t.file.title = '文件'
+t.file.name = '文件名称'
+t.file.code = '文件编号'
+t.file.typeName = '文件类型名称'
+t.file.typeCode = '文件类型编号'
+
+t.eq = {}
+t.eq.title = '设备'
+t.eq.id = '设备ID'
+t.eq.name = '设备名称'
+t.eq.code = '设备编码'
+t.eq.type = '设备类型'
+t.eq.grade = '设备规格'
+t.eq.group = '设备分组'
+t.eq.groupname = '分组名称'
+t.eq.groupcode = '分组编码'
+t.eq.excode = '设备外部代码'
+t.eq.input = '上片数据设备'
+t.eq.output = '下片数据设备'
+t.eq.tvalue = '设备TT值'
+t.eq.processingTime = '单件产品加工时间(秒)'
+t.eq.dtype = '数据类别'
+t.eq.dtypenone = '无类别'
+t.eq.dtypeinput = '上片数据设备'
+t.eq.dtypeoutput = '下片数据设备'
+t.eq.upload = '上传资料'
+t.eq.image = '设备图片'
+t.eq.viewattr = '查看设备属性'
+t.eq.plcbarcode = 'plc条码'
+t.eq.plccode = 'PLC编码'
+t.eq.plcname = 'PLC名称'
+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 = {}
+t.pl.title = '产线'
+t.pl.id = '产线ID'
+t.pl.name = '产线名称'
+t.pl.code = '产线编码'
+t.pl.status = '产线状态'
+t.pl.belong = '所属产线'
+t.pl.tvalue = '产线TT值(每小时下片数量)'
+t.pl.factoryHints = '请选择所属工厂'
 
 t.prompt = {}
 t.prompt.title = '提示'
 t.prompt.info = '确定进行[{handle}]操作?'
+t.prompt.sure = '确定删除这条记录吗?'
 t.prompt.success = '操作成功'
 t.prompt.failed = '操作失败'
 t.prompt.deleteBatch = '请选择删除项'
+t.prompt.month = '请选择月份'
 
 t.validate = {}
 t.validate.required = '必填项不能为空'
 t.validate.format = '{attr}格式错误'
 
 t.upload = {}
+t.upload.title = '上传资料'
 t.upload.text = '将文件拖到此处，或<em>点击上传</em>'
 t.upload.tip = '只支持{format}格式文件！'
 t.upload.button = '点击上传'
@@ -42,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 = '您的浏览器不支持此操作'
@@ -72,7 +429,8 @@ t.login.username = '用户名'
 t.login.password = '密码'
 t.login.captcha = '验证码'
 t.login.demo = '在线演示'
-t.login.copyright = '人人开源'
+t.login.copyright = '版权所有：中建材智能自动化研究院有限公司    版本: 1.0'
+t.login.warning = '已经登录过了'
 
 t.schedule = {}
 t.schedule.beanName = 'bean名称'
@@ -224,8 +582,13 @@ t.menu.resourceMethod = '请求方式'
 t.menu.resourceAddItem = '添加一项'
 
 t.params = {}
+t.params.name = '参数名称'
+t.params.code = '参数编码'
 t.params.paramCode = '编码'
 t.params.paramValue = '值'
+t.params.paramStdValue = '参数设定标准值'
+t.params.plctitle = 'PLC采集参数'
+t.params.plcid = 'PLC连接表ID'
 t.params.remark = '备注'
 
 t.role = {}

src/icons/index.js

@@ -1,4 +1,21 @@
 import './iconfont'
+import Vue from 'vue'
+import SvgIcon from '@/components/SvgIcon'// svg component
+
+// register globally
+Vue.component('svg-icon', SvgIcon)
+
+const req = require.context('./svg', false, /\.svg$/)
+const requireAll = requireContext => requireContext.keys().map(requireContext)
+requireAll(req)
 
 const svgFiles = require.context('./svg', true, /\.svg$/)
 svgFiles.keys().map(item => svgFiles(item))
+
+export default {
+  // 获取图标icon-(*).svg名称列表, 例如[shouye, xitong, zhedie, ...]
+  getNameList() {
+    return requireAll(req).map(item => item.default.id.replace('icon-', ''))
+  }
+}
+

src/icons/svg/eye-open.svg

@@ -0,0 +1 @@
+<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="128" height="128"><defs><style/></defs><path d="M512 128q69.675 0 135.51 21.163t115.498 54.997 93.483 74.837 73.685 82.006 51.67 74.837 32.17 54.827L1024 512q-2.347 4.992-6.315 13.483T998.87 560.17t-31.658 51.669-44.331 59.99-56.832 64.34-69.504 60.16-82.347 51.5-94.848 34.687T512 896q-69.675 0-135.51-21.163t-115.498-54.826-93.483-74.326-73.685-81.493-51.67-74.496-32.17-54.997L0 513.707q2.347-4.992 6.315-13.483t18.816-34.816 31.658-51.84 44.331-60.33 56.832-64.683 69.504-60.331 82.347-51.84 94.848-34.816T512 128.085zm0 85.333q-46.677 0-91.648 12.331t-81.152 31.83-70.656 47.146-59.648 54.485-48.853 57.686-37.675 52.821-26.325 43.99q12.33 21.674 26.325 43.52t37.675 52.351 48.853 57.003 59.648 53.845T339.2 767.02t81.152 31.488T512 810.667t91.648-12.331 81.152-31.659 70.656-46.848 59.648-54.186 48.853-57.344 37.675-52.651T927.957 512q-12.33-21.675-26.325-43.648t-37.675-52.65-48.853-57.345-59.648-54.186-70.656-46.848-81.152-31.659T512 213.334zm0 128q70.656 0 120.661 50.006T682.667 512 632.66 632.661 512 682.667 391.339 632.66 341.333 512t50.006-120.661T512 341.333zm0 85.334q-35.328 0-60.33 25.002T426.666 512t25.002 60.33T512 597.334t60.33-25.002T597.334 512t-25.002-60.33T512 426.666z"/></svg>

src/icons/svg/eye.svg

@@ -0,0 +1 @@
+<svg width="128" height="64" xmlns="http://www.w3.org/2000/svg"><path d="M127.072 7.994c1.37-2.208.914-5.152-.914-6.87-2.056-1.717-4.797-1.226-6.396.982-.229.245-25.586 32.382-55.74 32.382-29.24 0-55.74-32.382-55.968-32.627-1.6-1.963-4.57-2.208-6.397-.49C-.17 3.086-.399 6.275 1.2 8.238c.457.736 5.94 7.36 14.62 14.72L4.17 35.96c-1.828 1.963-1.6 5.152.228 6.87.457.98 1.6 1.471 2.742 1.471s2.284-.49 3.198-1.472l12.564-13.983c5.94 4.416 13.021 8.587 20.788 11.53l-4.797 17.418c-.685 2.699.686 5.397 3.198 6.133h1.37c2.057 0 3.884-1.472 4.341-3.68L52.6 42.83c3.655.736 7.538 1.227 11.422 1.227 3.883 0 7.767-.49 11.422-1.227l4.797 17.173c.457 2.208 2.513 3.68 4.34 3.68.457 0 .914 0 1.143-.246 2.513-.736 3.883-3.434 3.198-6.133l-4.797-17.172c7.767-2.944 14.848-7.114 20.788-11.53l12.336 13.738c.913.981 2.056 1.472 3.198 1.472s2.284-.49 3.198-1.472c1.828-1.963 1.828-4.906.228-6.87l-11.65-13.001c9.366-7.36 14.849-14.474 14.849-14.474z"/></svg>

src/icons/svg/international.svg

@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M83.287 103.01c-1.57-3.84-6.778-10.414-15.447-19.548-2.327-2.444-2.182-4.306-1.338-9.862v-.64c.553-3.81 1.513-6.05 14.313-8.087 6.516-1.018 8.203 1.57 10.589 5.178l.785 1.193a12.625 12.625 0 0 0 6.43 5.207c1.134.524 2.53 1.164 4.421 2.24 4.596 2.53 4.596 5.41 4.596 11.753v.727a26.91 26.91 0 0 1-5.178 17.454 59.055 59.055 0 0 1-19.025 11.026c3.49-6.546.814-14.313 0-16.553l-.146-.087zM64 5.12a58.502 58.502 0 0 1 25.484 5.818 54.313 54.313 0 0 0-12.859 10.327c-.93 1.28-1.716 2.473-2.472 3.579-2.444 3.694-3.637 5.352-5.818 5.614a25.105 25.105 0 0 1-4.219 0c-4.276-.29-10.094-.64-11.956 4.422-1.193 3.23-1.396 11.956 2.444 16.495.66 1.077.778 2.4.32 3.578a7.01 7.01 0 0 1-2.066 3.229 18.938 18.938 0 0 1-2.909-2.91 18.91 18.91 0 0 0-8.32-6.603c-1.25-.349-2.647-.64-3.985-.93-3.782-.786-8.03-1.688-9.019-3.812a14.895 14.895 0 0 1-.727-5.818 21.935 21.935 0 0 0-1.396-9.25 8.873 8.873 0 0 0-5.557-4.946A58.705 58.705 0 0 1 64 5.12zM0 64c0 35.346 28.654 64 64 64 35.346 0 64-28.654 64-64 0-35.346-28.654-64-64-64C28.654 0 0 28.654 0 64z"/></svg>

src/main.js

@@ -31,6 +31,10 @@ Vue.use(renRegionTree)
 Vue.prototype.$http = http
 Vue.prototype.$hasPermission = hasPermission
 Vue.prototype.$getDictLabel = getDictLabel
+// is auth
+Vue.prototype.isAuth = permission => {
+  return "正在检查的权限是：" + permission
+}
 
 // 保存整站vuex本地储存初始状态
 window.SITE_CONFIG['storeState'] = cloneDeep(store.state)

src/mixins/dictlist-module.js

@@ -0,0 +1,24 @@
+
+export default {
+  data() {
+    return {
+      dictList: {}
+    }
+  },
+  methods: {
+    initDictList(dictTypeIdList) {
+      const allDictList = JSON.parse(localStorage.getItem('dictList'))
+      if (!Object.keys(allDictList).length) {
+        return this.$message({
+          // TODO: i18n
+          message: '未能获取数据字典',
+          type: 'error',
+          duration: 2000
+        })
+      }
+      dictTypeIdList.forEach(id => {
+        this.dictList[id] = allDictList[id].map(item => ({ label: item.dictLabel, value: item.dictValue }))
+      })
+    }
+  }
+}

src/mixins/view-module.js

@@ -1,7 +1,7 @@
 import Cookies from 'js-cookie'
 import qs from 'qs'
 export default {
-  data () {
+  data() {
     /* eslint-disable */
     return {
       // 设置属性
@@ -29,22 +29,24 @@ export default {
     }
     /* eslint-enable */
   },
-  created () {
+  created() {
     if (this.mixinViewModuleOptions.createdIsNeed) {
       this.query()
     }
   },
-  activated () {
+  activated() {
     if (this.mixinViewModuleOptions.activatedIsNeed) {
       this.query()
     }
   },
   methods: {
     // 获取数据列表
-    query () {
+    query() {
       this.dataListLoading = true
       this.$http.get(
-        this.mixinViewModuleOptions.getDataListURL,
+        this.$http.adornUrl(
+          this.mixinViewModuleOptions.getDataListURL
+        ),
         {
           params: {
             order: this.order,
@@ -68,11 +70,11 @@ export default {
       })
     },
     // 多选
-    dataListSelectionChangeHandle (val) {
+    dataListSelectionChangeHandle(val) {
       this.dataListSelections = val
     },
     // 排序
-    dataListSortChangeHandle (data) {
+    dataListSortChangeHandle(data) {
       if (!data.order || !data.prop) {
         this.order = ''
         this.orderField = ''
@@ -83,13 +85,13 @@ export default {
       this.query()
     },
     // 分页, 每页条数
-    pageSizeChangeHandle (val) {
+    pageSizeChangeHandle(val) {
       this.page = 1
       this.limit = val
       this.query()
     },
     // 分页, 当前页
-    pageCurrentChangeHandle (val) {
+    pageCurrentChangeHandle(val) {
       this.page = val
       this.query()
     },
@@ -98,7 +100,7 @@ export default {
       this.query()
     },
     // 新增 / 修改
-    addOrUpdateHandle (id) {
+    addOrUpdateHandle(id) {
       this.addOrUpdateVisible = true
       this.$nextTick(() => {
         this.$refs.addOrUpdate.dataForm.id = id
@@ -106,7 +108,7 @@ export default {
       })
     },
     // 关闭当前窗口
-    closeCurrentTab (data) {
+    closeCurrentTab(data) {
       var tabName = this.$store.state.contentTabsActiveName
       this.$store.state.contentTabs = this.$store.state.contentTabs.filter(item => item.name !== tabName)
       if (this.$store.state.contentTabs.length <= 0) {
@@ -118,7 +120,7 @@ export default {
       }
     },
     // 删除
-    deleteHandle (id) {
+    deleteHandle(id) {
       if (this.mixinViewModuleOptions.deleteIsBatch && !id && this.dataListSelections.length <= 0) {
         return this.$message({
           message: this.$t('prompt.deleteBatch'),
@@ -132,7 +134,7 @@ export default {
         type: 'warning'
       }).then(() => {
         this.$http.delete(
-          `${this.mixinViewModuleOptions.deleteURL}${this.mixinViewModuleOptions.deleteIsBatch ? '' : '/' + id}`,
+          this.$http.adornUrl(`${this.mixinViewModuleOptions.deleteURL}${this.mixinViewModuleOptions.deleteIsBatch ? '' : '/' + id}`),
           this.mixinViewModuleOptions.deleteIsBatch ? {
             'data': id ? [id] : this.dataListSelections.map(item => item[this.mixinViewModuleOptions.deleteIsBatchKey])
           } : {}
@@ -148,11 +150,11 @@ export default {
               this.query()
             }
           })
-        }).catch(() => {})
+        }).catch(() => { })
-      }).catch(() => {})
+      }).catch(() => { })
     },
     // 导出
-    exportHandle () {
+    exportHandle() {
       var params = qs.stringify({
         'token': Cookies.get('token'),
         ...this.dataForm

src/router/index.js

@@ -2,6 +2,8 @@ import Vue from 'vue'
 import Router from 'vue-router'
 import http from '@/utils/request'
 import { isURL } from '@/utils/validate'
+import Cookies from 'js-cookie'
+import i18n from '@/i18n'
 
 Vue.use(Router)
 
@@ -12,7 +14,7 @@ export const pageRoutes = [
     component: () => import('@/views/pages/404'),
     name: '404',
     meta: { title: '404未找到' },
-    beforeEnter (to, from, next) {
+    beforeEnter(to, from, next) {
       // 拦截处理特殊业务场景
       // 如果, 重定向路由包含__双下划线, 为临时添加路由
       if (/__.*/.test(to.redirectedFrom)) {
@@ -21,7 +23,20 @@ export const pageRoutes = [
       next()
     }
   },
-  { path: '/login', component: () => import('@/views/pages/login'), name: 'login', meta: { title: '登录' } }
+  {
+    path: '/login',
+    component: () => import('@/views/pages/login'),
+    name: 'login',
+    meta: { title: '登录' },
+    beforeEnter(to, from, next) {
+      if (Cookies.get('token')) {
+        Vue.prototype.$message({ message: $t('login.warning'), type: 'error' })
+        next(false)
+      } else {
+        next()
+      }
+    }
+  }
 ]
 
 // 模块路由(基于主入口布局页面)
@@ -29,14 +44,16 @@ export const moduleRoutes = {
   path: '/',
   component: () => import('@/views/main'),
   name: 'main',
-  redirect: { name: 'home' },
+  // redirect: { name: 'home' },
+  redirect: { name: 'sys-log-login' },
   meta: { title: '主入口布局' },
   children: [
-    { path: '/home', component: () => import('@/views/modules/home'), name: 'home', meta: { title: '首页', isTab: true } }
+    { path: '/sys-log-login', component: () => import('@/views/modules/sys/log-login'), name: 'sys-log-login', meta: { title: '首页', isTab: true } }
+    // { path: '/home', component: () => import('@/views/modules/home'), name: 'home', meta: { title: '首页', isTab: true } }
   ]
 }
 
-export function addDynamicRoute (routeParams, router) {
+export function addDynamicRoute(routeParams, router) {
   // 组装路由名称, 并判断是否已添加, 如是: 则直接跳转
   var routeName = routeParams.routeName
   var dynamicRoute = window.SITE_CONFIG['dynamicRoutes'].filter(item => item.name === routeName)[0]
@@ -77,24 +94,30 @@ router.beforeEach((to, from, next) => {
   if (window.SITE_CONFIG['dynamicMenuRoutesHasAdded'] || fnCurrentRouteIsPageRoute(to, pageRoutes)) {
     return next()
   }
+
   // 获取字典列表, 添加并全局变量保存
-  http.get('/sys/dict/type/all').then(({ data: res }) => {
+  http.get(http.adornUrl('/sys/dict/type/all')).then(({ data: res }) => {
     if (res.code !== 0) {
       return
     }
     window.SITE_CONFIG['dictList'] = res.data
-  }).catch(() => {})
+  }).catch((err) => {
+  })
   // 获取菜单列表, 添加并全局变量保存
-  http.get('/sys/menu/nav').then(({ data: res }) => {
+  http.get(http.adornUrl('/sys/menu/nav')).then(({ data: res }) => {
-    if (res.code !== 0) {
+    /** axios 的拦截器已经拦截出错情况，此处只考虑正确情况即可 */
-      Vue.prototype.$message.error(res.msg)
-      return next({ name: 'login' })
-    }
     window.SITE_CONFIG['menuList'] = res.data
+    // .map(item => {
+    //   if (item.name === '产品池') {
+    //     console.log('Got you')
+    //     item.name = 
+    //   }
+    //   return item
+    // })
     fnAddDynamicMenuRoutes(window.SITE_CONFIG['menuList'])
     next({ ...to, replace: true })
-  }).catch(() => {
+  }).catch((err) => {
-    next({ name: 'login' })
+    // Vue.prototype.$message.error(err)
   })
 })
 
@@ -103,7 +126,7 @@ router.beforeEach((to, from, next) => {
  * @param {*} route 当前路由
  * @param {*} pageRoutes 页面路由
  */
-function fnCurrentRouteIsPageRoute (route, pageRoutes = []) {
+function fnCurrentRouteIsPageRoute(route, pageRoutes = []) {
   var temp = []
   for (var i = 0; i < pageRoutes.length; i++) {
     if (route.path === pageRoutes[i].path) {
@@ -121,10 +144,13 @@ function fnCurrentRouteIsPageRoute (route, pageRoutes = []) {
  * @param {*} menuList 菜单列表
  * @param {*} routes 递归创建的动态(菜单)路由
  */
-function fnAddDynamicMenuRoutes (menuList = [], routes = []) {
+function fnAddDynamicMenuRoutes(menuList = [], routes = []) {
   var temp = []
+
   for (var i = 0; i < menuList.length; i++) {
     if (menuList[i].children && menuList[i].children.length >= 1) {
+      // 菜单的国际化
+      menuList[i].name = i18n.t(`routes["${menuList[i].name}"]`)
       temp = temp.concat(menuList[i].children)
       continue
     }
@@ -136,9 +162,15 @@ function fnAddDynamicMenuRoutes (menuList = [], routes = []) {
       meta: {
         ...window.SITE_CONFIG['contentTabDefault'],
         menuId: menuList[i].id,
-        title: menuList[i].name
+        // 菜单的国际化
+        title: i18n.t(`routes["${menuList[i].name}"]`)
       }
     }
+
+    // 菜单的国际化
+    menuList[i].name = i18n.t(`routes["${menuList[i].name}"]`)
+
+    // 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)) {
@@ -151,9 +183,11 @@ function fnAddDynamicMenuRoutes (menuList = [], routes = []) {
     }
     routes.push(route)
   }
+
   if (temp.length >= 1) {
     return fnAddDynamicMenuRoutes(temp, routes)
   }
+
   // 添加路由
   router.addRoutes([
     {

src/store/index.js

@@ -1,3 +1,11 @@
+/*
+ * @Descripttion: 
+ * @version: 
+ * @Author: fzq
+ * @Date: 2022-12-11 20:33:35
+ * @LastEditors: fzq
+ * @LastEditTime: 2022-12-11 20:43:32
+ */
 import Vue from 'vue'
 import Vuex from 'vuex'
 import cloneDeep from 'lodash/cloneDeep'
@@ -9,7 +17,7 @@ export default new Vuex.Store({
   namespaced: true,
   state: {
     // 导航条, 布局风格, default(白色) / colorful(鲜艳)
-    navbarLayoutType: 'colorful',
+    navbarLayoutType: '',
     // 侧边栏, 布局皮肤, default(白色) / dark(黑色)
     sidebarLayoutSkin: 'dark',
     // 侧边栏, 折叠状态
@@ -23,11 +31,13 @@ export default new Vuex.Store({
     contentTabs: [
       {
         ...window.SITE_CONFIG['contentTabDefault'],
-        'name': 'home',
+        'name': 'sys-log-login',
+        // 'name': 'home',
         'title': 'home'
       }
     ],
-    contentTabsActiveName: 'home'
+    // contentTabsActiveName: 'home'
+    contentTabsActiveName: 'sys-log-login'
   },
   modules: {
     user

src/utils/filters.js

@@ -0,0 +1,24 @@
+/** filters */
+import moment from 'moment'
+
+export const dictFilter = dictTypeId => {
+	return val => {
+		return JSON.parse(localStorage.getItem('dictList'))[dictTypeId].find(item => item.dictValue === val)?.dictLabel || '-'
+	}
+}
+
+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/index.js

@@ -5,7 +5,7 @@ import store from '@/store'
  * 权限
  * @param {*} key
  */
-export function hasPermission (key) {
+export function hasPermission(key) {
   return window.SITE_CONFIG['permissions'].indexOf(key) !== -1 || false
 }
 
@@ -13,7 +13,7 @@ export function hasPermission (key) {
  * 获取字典数据列表
  * @param dictType  字典类型
  */
-export function getDictDataList (dictType) {
+export function getDictDataList(dictType) {
   const type = window.SITE_CONFIG['dictList'].find((element) => (element.dictType === dictType))
   if (type) {
     return type.dataList
@@ -27,7 +27,7 @@ export function getDictDataList (dictType) {
  * @param dictType  字典类型
  * @param dictValue  字典值
  */
-export function getDictLabel (dictType, dictValue) {
+export function getDictLabel(dictType, dictValue) {
   const type = window.SITE_CONFIG['dictList'].find((element) => (element.dictType === dictType))
   if (type) {
     const val = type.dataList.find((element) => (element.dictValue === dictValue + ''))
@@ -44,16 +44,17 @@ export function getDictLabel (dictType, dictValue) {
 /**
  * 清除登录信息
  */
-export function clearLoginInfo () {
+export function clearLoginInfo() {
   store.commit('resetStore')
   Cookies.remove('token')
   window.SITE_CONFIG['dynamicMenuRoutesHasAdded'] = false
+  window.SITE_CONFIG['dynamicMenuRoutes'] = []
 }
 
 /**
  * 获取uuid
  */
-export function getUUID () {
+export function getUUID() {
   return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
     return (c === 'x' ? (Math.random() * 16 | 0) : ('r&0x3' | '0x8')).toString(16)
   })
@@ -62,7 +63,7 @@ export function getUUID () {
 /**
  * 获取svg图标(id)列表
  */
-export function getIconList () {
+export function getIconList() {
   var res = []
   var list = document.querySelectorAll('svg symbol')
   for (var i = 0; i < list.length; i++) {
@@ -73,12 +74,12 @@ export function getIconList () {
 }
 
 /**
- * 树形数据转换
+ * 树形数据转换，把扁平的数据，转换为树形结构的数据
  * @param {*} data
  * @param {*} id
  * @param {*} pid
  */
-export function treeDataTranslate (data, id = 'id', pid = 'pid') {
+export function treeDataTranslate(data, id = 'id', pid = 'pid') {
   var res = []
   var temp = {}
   for (var i = 0; i < data.length; i++) {
@@ -97,3 +98,19 @@ export function treeDataTranslate (data, id = 'id', pid = 'pid') {
   }
   return res
 }
+
+/** 计算表格的最大高 */
+export function calcMaxHeight(num) {
+  const FIXED_HEIGHT = 220
+  let clientHeight = 0
+  const bodyHeight = document.body.clientHeight || null
+  const documentHeight = document.documentElement.clientHeight || null
+  if (bodyHeight && documentHeight) {
+    clientHeight = Math.max(bodyHeight, documentHeight)
+  } else {
+    clientHeight = documentHeight ? documentHeight : bodyHeight
+  }
+
+  const finalHeight = clientHeight - num - FIXED_HEIGHT
+  return finalHeight > 0 ? finalHeight : -finalHeight
+}

src/utils/request.js

@@ -4,9 +4,13 @@ import router from '@/router'
 import qs from 'qs'
 import { clearLoginInfo } from '@/utils'
 import isPlainObject from 'lodash/isPlainObject'
+import merge from 'lodash/merge'
 
 const http = axios.create({
-  baseURL: window.SITE_CONFIG['apiURL'],
+  // baseURL: window.SITE_CONFIG['apiURL'],
+  baseURL: '/api',
+  // baseURL: '/yd-monitor',
+  // baseURL: process.env.NODE_ENV === 'production' ? '/api' : '/yd-monitor',
   timeout: 1000 * 180,
   withCredentials: true
 })
@@ -55,10 +59,54 @@ http.interceptors.response.use(response => {
     router.replace({ name: 'login' })
     return Promise.reject(response.data.msg)
   }
+  //  else if (response.data.code === 500) {
+  //   return Promise.reject(response.data.msg)
+  // }
   return response
 }, error => {
   console.error(error)
   return Promise.reject(error)
 })
 
+/**
+ * 请求地址处理
+ * @param {*} actionName action方法名称
+ */
+http.adornUrl = (actionName) => {
+  // 非生产环境 && 开启代理, 接口前缀统一使用[/proxyApi/]前缀做代理拦截!
+  // return (process.env.NODE_ENV !== 'production' && process.env.OPEN_PROXY ? window.SITE_CONFIG.projURL : '') + actionName
+  // return (process.env.NODE_ENV !== 'production' ? '/yd-monitor' : '/api') + actionName
+  return actionName
+}
+
+/**
+ * get请求参数处理
+ * @param {*} params 参数对象
+ * @param {*} openDefultParams 是否开启默认参数?
+ */
+http.adornParams = (params = {}, openDefaultParams = true) => {
+  var defaults = {
+    't': new Date().getTime()
+  }
+  return openDefaultParams ? merge(defaults, params) : params
+}
+
+/**
+ * post请求数据处理
+ * @param {*} data 数据对象
+ * @param {*} openDefultdata 是否开启默认数据?
+ * @param {*} contentType 数据格式
+ *  json: 'application/json; charset=utf-8'
+ *  form: 'application/x-www-form-urlencoded; charset=utf-8'
+ */
+http.adornData = (data = {}, openDefaultdata = true, contentType = 'json') => {
+  var defaults = {
+    't': new Date().getTime()
+  }
+  data = openDefaultdata ? merge(defaults, data) : data
+  return contentType === 'raw' ? data : contentType === 'json' ? JSON.stringify(data) : qs.stringify(data)
+  // return contentType === 'json' ? JSON.stringify(data, (_, v) => typeof v === 'bigint' ? v.toString() : v) : qs.stringify(data)
+}
+
+
 export default http

src/utils/validate.js

@@ -1,3 +1,11 @@
+/*
+ * @Descripttion: 
+ * @version: 
+ * @Author: fzq
+ * @Date: 2022-11-25 09:51:46
+ * @LastEditors: fzq
+ * @LastEditTime: 2022-11-30 15:09:05
+ */
 /**
  * 邮箱
  * @param {*} s
@@ -29,3 +37,11 @@ export function isPhone (s) {
 export function isURL (s) {
   return /^http[s]?:\/\/.*/.test(s)
 }
+
+/**
+ * @param {string} path
+ * @returns {Boolean}
+ */
+ export function isExternal(path) {
+  return /^(https?:|mailto:|tel:)/.test(path)
+}

src/views/main-content.vue

@@ -1,96 +1,96 @@
 <template>
-  <main :class="['aui-content', { 'aui-content--tabs': $route.meta.isTab }]">
+	<main :class="['aui-content', { 'aui-content--tabs': $route.meta.isTab }]">
-    <!-- tab展示内容 -->
+		<!-- tab展示内容 -->
-    <template v-if="$route.meta.isTab">
+		<template v-if="$route.meta.isTab">
-      <el-dropdown class="aui-content--tabs-tools">
+			<el-dropdown class="aui-content--tabs-tools">
-        <i class="el-icon-arrow-down"></i>
+				<i class="el-icon-arrow-down"></i>
-        <el-dropdown-menu slot="dropdown" :show-timeout="0">
+				<el-dropdown-menu slot="dropdown" :show-timeout="0">
-          <el-dropdown-item @click.native="tabRemoveHandle($store.state.contentTabsActiveName)">{{ $t('contentTabs.closeCurrent') }}</el-dropdown-item>
+					<el-dropdown-item @click.native="tabRemoveHandle($store.state.contentTabsActiveName)">{{ $t('contentTabs.closeCurrent') }}</el-dropdown-item>
-          <el-dropdown-item @click.native="tabsCloseOtherHandle()">{{ $t('contentTabs.closeOther') }}</el-dropdown-item>
+					<el-dropdown-item @click.native="tabsCloseOtherHandle()">{{ $t('contentTabs.closeOther') }}</el-dropdown-item>
-          <el-dropdown-item @click.native="tabsCloseAllHandle()">{{ $t('contentTabs.closeAll') }}</el-dropdown-item>
+					<el-dropdown-item @click.native="tabsCloseAllHandle()">{{ $t('contentTabs.closeAll') }}</el-dropdown-item>
-        </el-dropdown-menu>
+				</el-dropdown-menu>
-      </el-dropdown>
+			</el-dropdown>
-      <el-tabs v-model="$store.state.contentTabsActiveName" @tab-click="tabSelectedHandle" @tab-remove="tabRemoveHandle">
+			<el-tabs v-model="$store.state.contentTabsActiveName" @tab-click="tabSelectedHandle" @tab-remove="tabRemoveHandle">
-        <el-tab-pane
+				<el-tab-pane
-          v-for="item in $store.state.contentTabs"
+					v-for="item in $store.state.contentTabs"
-          :key="item.name"
+					:key="item.name"
-          :name="item.name"
+					:name="item.name"
-          :label="item.title"
+					:label="item.title"
-          :closable="item.name !== 'home'"
+					:closable="item.name !== 'home'"
-          :class="{ 'is-iframe': tabIsIframe(item.iframeURL) }">
+					:class="{ 'is-iframe': tabIsIframe(item.iframeURL) }"
-          <template v-if="item.name === 'home'">
+				>
-            <svg slot="label" class="icon-svg aui-content--tabs-icon-nav" aria-hidden="true"><use xlink:href="#icon-home"></use></svg>
+					<template v-if="item.name === 'home'">
-          </template>
+						<svg slot="label" class="icon-svg aui-content--tabs-icon-nav" aria-hidden="true"><use xlink:href="#icon-home"></use></svg>
-          <iframe v-if="tabIsIframe(item.iframeURL)" :src="item.iframeURL" width="100%" height="100%" frameborder="0" scrolling="yes"></iframe>
+					</template>
-          <keep-alive v-else>
+					<iframe v-if="tabIsIframe(item.iframeURL)" :src="item.iframeURL" width="100%" height="100%" frameborder="0" scrolling="yes"></iframe>
-            <router-view v-if="item.name === $store.state.contentTabsActiveName" />
+					<keep-alive v-else>
-          </keep-alive>
+						<router-view v-if="item.name === $store.state.contentTabsActiveName" />
-        </el-tab-pane>
+					</keep-alive>
-      </el-tabs>
+				</el-tab-pane>
-    </template>
+			</el-tabs>
-    <!-- 其他方式, 展示内容 -->
+		</template>
-    <template v-else>
+		<!-- 其他方式, 展示内容 -->
-      <keep-alive>
+		<template v-else>
-        <router-view />
+			<keep-alive>
-      </keep-alive>
+				<router-view />
-    </template>
+			</keep-alive>
-  </main>
+		</template>
+	</main>
 </template>
 
 <script>
 import { isURL } from '@/utils/validate'
 export default {
-  data () {
+	data() {
-    return {
+		return {}
-    }
+	},
-  },
+	methods: {
-  methods: {
+		// tabs, 是否通过iframe展示
-    // tabs, 是否通过iframe展示
+		tabIsIframe(url) {
-    tabIsIframe (url) {
+			return isURL(url)
-      return isURL(url)
+		},
-    },
+		// tabs, 选中tab
-    // tabs, 选中tab
+		tabSelectedHandle(tab) {
-    tabSelectedHandle (tab) {
+			tab = this.$store.state.contentTabs.filter(item => item.name === tab.name)[0]
-      tab = this.$store.state.contentTabs.filter(item => item.name === tab.name)[0]
+			if (tab) {
-      if (tab) {
+				this.$router.push({
-        this.$router.push({
+					name: tab.name,
-          'name': tab.name,
+					params: { ...tab.params },
-          'params': { ...tab.params },
+					query: { ...tab.query }
-          'query': { ...tab.query }
+				})
-        })
+			}
-      }
+		},
-    },
+		// tabs, 删除tab
-    // tabs, 删除tab
+		tabRemoveHandle(tabName) {
-    tabRemoveHandle (tabName) {
+			if (tabName === 'home') {
-      if (tabName === 'home') {
+				return false
-        return false
+			}
-      }
+			this.$store.state.contentTabs = this.$store.state.contentTabs.filter(item => item.name !== tabName)
-      this.$store.state.contentTabs = this.$store.state.contentTabs.filter(item => item.name !== tabName)
+			if (this.$store.state.contentTabs.length <= 0) {
-      if (this.$store.state.contentTabs.length <= 0) {
+				this.$store.state.sidebarMenuActiveName = this.$store.state.contentTabsActiveName = 'home'
-        this.$store.state.sidebarMenuActiveName = this.$store.state.contentTabsActiveName = 'home'
+				return false
-        return false
+			}
-      }
+			// 当前选中tab被删除
-      // 当前选中tab被删除
+			if (tabName === this.$store.state.contentTabsActiveName) {
-      if (tabName === this.$store.state.contentTabsActiveName) {
+				let tab = this.$store.state.contentTabs[this.$store.state.contentTabs.length - 1]
-        let tab = this.$store.state.contentTabs[this.$store.state.contentTabs.length - 1]
+				this.$router.push({
-        this.$router.push({
+					name: tab.name,
-          name: tab.name,
+					params: { ...tab.params },
-          params: { ...tab.params },
+					query: { ...tab.query }
-          query: { ...tab.query }
+				})
-        })
+			}
-      }
+		},
-    },
+		// tabs, 关闭其它
-    // tabs, 关闭其它
+		tabsCloseOtherHandle() {
-    tabsCloseOtherHandle () {
+			this.$store.state.contentTabs = this.$store.state.contentTabs.filter(item => {
-      this.$store.state.contentTabs = this.$store.state.contentTabs.filter(item => {
+				return item.name === 'home' || item.name === this.$store.state.contentTabsActiveName
-        return item.name === 'home' || item.name === this.$store.state.contentTabsActiveName
+			})
-      })
+		},
-    },
+		// tabs, 关闭全部
-    // tabs, 关闭全部
+		tabsCloseAllHandle() {
-    tabsCloseAllHandle () {
+			this.$store.state.contentTabs = this.$store.state.contentTabs.filter(item => item.name === 'home')
-      this.$store.state.contentTabs = this.$store.state.contentTabs.filter(item => item.name === 'home')
+			this.$router.push({ name: 'home' })
-      this.$router.push({ name: 'home' })
+		}
-    }
+	}
-  }
 }
 </script>

src/views/main-navbar-update-password.vue

@@ -1,97 +1,95 @@
 <template>
-  <el-dialog
+	<el-dialog :visible.sync="visible" :title="$t('updatePassword.title')" :close-on-click-modal="false" :close-on-press-escape="false" :append-to-body="true">
-    :visible.sync="visible"
+		<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" label-width="120px">
-    :title="$t('updatePassword.title')"
+			<el-form-item :label="$t('updatePassword.username')">
-    :close-on-click-modal="false"
+				<span>{{ $store.state.user.name }}</span>
-    :close-on-press-escape="false"
+			</el-form-item>
-    :append-to-body="true">
+			<el-form-item prop="password" :label="$t('updatePassword.password')">
-    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" label-width="120px">
+				<el-input v-model="dataForm.password" type="password" :placeholder="$t('updatePassword.password')"></el-input>
-      <el-form-item :label="$t('updatePassword.username')">
+			</el-form-item>
-        <span>{{ $store.state.user.name }}</span>
+			<el-form-item prop="newPassword" :label="$t('updatePassword.newPassword')">
-      </el-form-item>
+				<el-input v-model="dataForm.newPassword" type="password" :placeholder="$t('updatePassword.newPassword')"></el-input>
-      <el-form-item prop="password" :label="$t('updatePassword.password')">
+			</el-form-item>
-        <el-input v-model="dataForm.password" type="password" :placeholder="$t('updatePassword.password')"></el-input>
+			<el-form-item prop="confirmPassword" :label="$t('updatePassword.confirmPassword')">
-      </el-form-item>
+				<el-input v-model="dataForm.confirmPassword" type="password" :placeholder="$t('updatePassword.confirmPassword')"></el-input>
-      <el-form-item prop="newPassword" :label="$t('updatePassword.newPassword')">
+			</el-form-item>
-        <el-input v-model="dataForm.newPassword" type="password" :placeholder="$t('updatePassword.newPassword')"></el-input>
+		</el-form>
-      </el-form-item>
+		<template slot="footer">
-      <el-form-item prop="confirmPassword" :label="$t('updatePassword.confirmPassword')">
+			<el-button @click="visible = false">{{ $t('cancel') }}</el-button>
-        <el-input v-model="dataForm.confirmPassword" type="password" :placeholder="$t('updatePassword.confirmPassword')"></el-input>
+			<el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
-      </el-form-item>
+		</template>
-    </el-form>
+	</el-dialog>
-    <template slot="footer">
-      <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
-      <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
-    </template>
-  </el-dialog>
 </template>
 
 <script>
 import debounce from 'lodash/debounce'
 import { clearLoginInfo } from '@/utils'
 export default {
-  data () {
+	data() {
-    return {
+		return {
-      visible: false,
+			visible: false,
-      dataForm: {
+			dataForm: {
-        password: '',
+				password: '',
-        newPassword: '',
+				newPassword: '',
-        confirmPassword: ''
+				confirmPassword: ''
-      }
+			}
-    }
+		}
-  },
+	},
-  computed: {
+	computed: {
-    dataRule () {
+		dataRule() {
-      var validateConfirmPassword = (rule, value, callback) => {
+			var validateConfirmPassword = (rule, value, callback) => {
-        if (this.dataForm.newPassword !== value) {
+				if (this.dataForm.newPassword !== value) {
-          return callback(new Error(this.$t('updatePassword.validate.confirmPassword')))
+					return callback(new Error(this.$t('updatePassword.validate.confirmPassword')))
-        }
+				}
-        callback()
+				callback()
-      }
+			}
-      return {
+			return {
-        password: [
+				password: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+				newPassword: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
-        ],
+				confirmPassword: [
-        newPassword: [
+					{ required: true, message: this.$t('validate.required'), trigger: 'blur' },
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+					{ validator: validateConfirmPassword, trigger: 'blur' }
-        ],
+				]
-        confirmPassword: [
+			}
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
+		}
-          { validator: validateConfirmPassword, trigger: 'blur' }
+	},
-        ]
+	methods: {
-      }
+		init() {
-    }
+			this.visible = true
-  },
+			this.$nextTick(() => {
-  methods: {
+				this.$refs['dataForm'].resetFields()
-    init () {
+			})
-      this.visible = true
+		},
-      this.$nextTick(() => {
+		// 表单提交
-        this.$refs['dataForm'].resetFields()
+		dataFormSubmitHandle: debounce(
-      })
+			function() {
-    },
+				this.$refs['dataForm'].validate(valid => {
-    // 表单提交
+					if (!valid) {
-    dataFormSubmitHandle: debounce(function () {
+						return false
-      this.$refs['dataForm'].validate((valid) => {
+					}
-        if (!valid) {
+					this.$http
-          return false
+						.put('/sys/user/password', this.dataForm)
-        }
+						.then(({ data: res }) => {
-        this.$http.put('/sys/user/password', this.dataForm).then(({ data: res }) => {
+							if (res.code !== 0) {
-          if (res.code !== 0) {
+								return this.$message.error(res.msg)
-            return this.$message.error(res.msg)
+							}
-          }
+							this.$message({
-          this.$message({
+								message: this.$t('prompt.success'),
-            message: this.$t('prompt.success'),
+								type: 'success',
-            type: 'success',
+								duration: 500,
-            duration: 500,
+								onClose: () => {
-            onClose: () => {
+									this.visible = false
-              this.visible = false
+									clearLoginInfo()
-              clearLoginInfo()
+									this.$router.replace({ name: 'login' })
-              this.$router.replace({ name: 'login' })
+								}
-            }
+							})
-          })
+						})
-        }).catch(() => {})
+						.catch(() => {})
-      })
+				})
-    }, 1000, { 'leading': true, 'trailing': false })
+			},
-  }
+			1000,
+			{ leading: true, trailing: false }
+		)
+	}
 }
 </script>

src/views/main-navbar.vue

@@ -1,103 +1,168 @@
 <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">
+		<!-- <hamburger v-if="showhome" id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /> -->
-      <h1 class="aui-navbar__brand" @click="$router.push({ name: 'home' })">
+		<div class="aui-navbar__header">
-        <a class="aui-navbar__brand-lg" href="javascript:;">{{ $t('brand.lg') }}</a>
+			<h1 class="aui-navbar__brand" @click="$router.push({ name: 'sys-log-login' })">
-        <a class="aui-navbar__brand-mini" href="javascript:;">{{ $t('brand.mini') }}</a>
+				<a class="aui-navbar__brand-lg" href="javascript:;">
-      </h1>
+					<img src="../assets/img/cnbm.png" style="width: 36px; height: 36px; position: relative; top: 0em; margin-right: 12px" alt="" />
-    </div>
+					{{ $t('brand.lg') }}
-    <div class="aui-navbar__body">
+				</a>
-      <el-menu class="aui-navbar__menu mr-auto" mode="horizontal">
+				<!-- <a class="aui-navbar__brand-mini" href="javascript:;">{{ $t('brand.mini') }}</a> -->
-        <el-menu-item index="1" @click="$store.state.sidebarFold = !$store.state.sidebarFold">
+				<!-- 缩放时LOGO -->
-          <svg class="icon-svg aui-navbar__icon-menu aui-navbar__icon-menu--switch" aria-hidden="true"><use xlink:href="#icon-outdent"></use></svg>
+				<a class="aui-navbar__brand-mini" href="javascript:;">
-        </el-menu-item>
+					<img src="../assets/img/cnbm.png" style="width: 36px; height: 36px; position: relative; top: 0em" alt="" />
-        <el-menu-item index="2" @click="refresh()">
+				</a>
-          <svg class="icon-svg aui-navbar__icon-menu aui-navbar__icon-menu--refresh" aria-hidden="true"><use xlink:href="#icon-sync"></use></svg>
+			</h1>
-        </el-menu-item>
+		</div>
-      </el-menu>
+		<!-- <breadcrumb id="breadcrumb-container" class="breadcrumb-container" /> -->
-      <el-menu class="aui-navbar__menu" mode="horizontal">
+		<div class="aui-navbar__body">
-        <el-menu-item index="2">
+			<el-menu class="aui-navbar__menu mr-auto" mode="horizontal">
-          <a href="https://www.renren.io/" target="_blank">
+				<el-menu-item index="1" @click="$store.state.sidebarFold = !$store.state.sidebarFold">
-            <svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true"><use xlink:href="#icon-earth"></use></svg>
+					<svg class="icon-svg aui-navbar__icon-menu aui-navbar__icon-menu--switch" aria-hidden="true">
-          </a>
+						<use xlink:href="#icon-outdent"></use>
-        </el-menu-item>
+					</svg>
-        <el-menu-item index="2">
+				</el-menu-item>
-          <a href="https://gitee.com/renrenio/renren-security" target="_blank">
+				<el-menu-item index="2" @click="refresh()">
-            <svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true"><use xlink:href="#gitee"></use></svg>
+					<svg class="icon-svg aui-navbar__icon-menu aui-navbar__icon-menu--refresh" aria-hidden="true">
-          </a>
+						<use xlink:href="#icon-sync"></use>
-        </el-menu-item>
+					</svg>
-        <el-menu-item index="4" @click="fullscreenHandle()">
+				</el-menu-item>
-          <svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true"><use xlink:href="#icon-fullscreen"></use></svg>
+			</el-menu>
-        </el-menu-item>
+			<el-menu class="aui-navbar__menu" mode="horizontal">
-        <el-menu-item index="5" class="aui-navbar__avatar">
+				<!-- <el-menu-item index="2">
-          <el-dropdown placement="bottom" :show-timeout="0">
+					<a href="https://www.renren.io/" target="_blank">
-            <span class="el-dropdown-link">
+						<svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true"><use xlink:href="#icon-earth"></use></svg>
-              <img src="~@/assets/img/avatar.png">
+					</a>
-              <span>{{ $store.state.user.name }}</span>
+				</el-menu-item>
-              <i class="el-icon-arrow-down"></i>
+				<el-menu-item index="2">
-            </span>
+					<a href="https://gitee.com/renrenio/renren-security" target="_blank">
-            <el-dropdown-menu slot="dropdown">
+						<svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true"><use xlink:href="#gitee"></use></svg>
-              <el-dropdown-item @click.native="updatePasswordHandle()">{{ $t('updatePassword.title') }}</el-dropdown-item>
+					</a>
-              <el-dropdown-item @click.native="logoutHandle()">{{ $t('logout') }}</el-dropdown-item>
+				</el-menu-item> -->
-            </el-dropdown-menu>
+				<el-menu-item index="3">
-          </el-dropdown>
+					<!-- <el-dropdown :style="showTitle ? 'color: #fff' : '#000'" class="hover-effect" trigger="click">
-        </el-menu-item>
+						<el-badge :hidden="alarmNum > 0 ? false : true" :value="alarmNum" class="item" style="line-height: 0; margin: 0 10px; vertical-align: -3px" @click.native="handleAlarm">
-      </el-menu>
+							<svg-icon style="width: 24px; height: 24px" class="item-icon" icon-class="alarm" />
-    </div>
+						</el-badge>
-    <!-- 弹窗, 修改密码 -->
+						<el-dropdown-menu slot="dropdown">
-    <update-password v-if="updatePasswordVisible" ref="updatePassword"></update-password>
+							<el-dropdown-item>暂无数据</el-dropdown-item>
-  </nav>
+						</el-dropdown-menu>
+					</el-dropdown> -->
+					<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>
+							</svg>
+							<!-- <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-menu>
+					</el-dropdown>
+				</el-menu-item>
+				<el-menu-item index="4" @click="fullscreenHandle()">
+					<svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true">
+						<use xlink:href="#icon-fullscreen"></use>
+					</svg>
+				</el-menu-item>
+				<el-menu-item index="5" class="aui-navbar__avatar">
+					<el-dropdown placement="bottom" :show-timeout="0">
+						<span class="el-dropdown-link">
+							<img src="~@/assets/img/avatar.png" />
+							<span>{{ $store.state.user.name }}</span>
+							<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-menu>
+					</el-dropdown>
+				</el-menu-item>
+			</el-menu>
+		</div>
+		<!-- 弹窗, 修改密码 -->
+		<update-password v-if="updatePasswordVisible" ref="updatePassword"></update-password>
+	</nav>
 </template>
 <script>
+// import Hamburger from '@/components/Hamburger'
+import Cookies from 'js-cookie'
 import screenfull from 'screenfull'
 import UpdatePassword from './main-navbar-update-password'
 import { clearLoginInfo } from '@/utils'
 export default {
-  inject: ['refresh'],
+	inject: ['refresh'],
-  data () {
+	data() {
-    return {
+		return {
-      updatePasswordVisible: false,
+			updatePasswordVisible: false,
-      messageTip: false
+			messageTip: false
-    }
+		}
-  },
+	},
-  components: {
+	components: {
-    UpdatePassword
+		UpdatePassword
-  },
+		// Hamburger
-  methods: {
+	},
-    // 全屏
+	methods: {
-    fullscreenHandle () {
+		// 获取当前语言环境
-      if (!screenfull.enabled) {
+		getLang() {
-        return this.$message({
+			return Cookies.get('language')
-          message: this.$t('fullscreen.prompt'),
+		},
-          type: 'warning',
+		// 切换语言环境
-          duration: 500
+		handleCommand(command) {
-        })
+			// 切换语言选项时，可能需要手动刷新页面
-      }
+			switch (command) {
-      screenfull.toggle()
+				case 'toCN':
-    },
+					this.$root.$i18n.locale = 'zh-CN'
-    // 修改密码
+					window.navigator.language = 'zh-cn'
-    updatePasswordHandle () {
+					break
-      this.updatePasswordVisible = true
+				case 'toEN':
-      this.$nextTick(() => {
+					console.log('root', this.$root.$i18n.locale)
-        this.$refs.updatePassword.init()
+					this.$root.$i18n.locale = 'en'
-      })
+					location.reload()
-    },
+					window.navigator.language = 'en-US'
-    // 退出
+					break
-    logoutHandle () {
+			}
-      this.$confirm(this.$t('prompt.info', { 'handle': this.$t('logout') }), this.$t('prompt.title'), {
+		},
-        confirmButtonText: this.$t('confirm'),
+		// 全屏
-        cancelButtonText: this.$t('cancel'),
+		fullscreenHandle() {
-        type: 'warning'
+			if (!screenfull.enabled) {
-      }).then(() => {
+				return this.$message({
-        this.$http.post('/logout').then(({ data: res }) => {
+					message: this.$t('fullscreen.prompt'),
-          if (res.code !== 0) {
+					type: 'warning',
-            return this.$message.error(res.msg)
+					duration: 500
-          }
+				})
-          clearLoginInfo()
+			}
-          this.$router.push({ name: 'login' })
+			screenfull.toggle()
-        }).catch(() => {})
+		},
-      }).catch(() => {})
+		// 修改密码
-    }
+		updatePasswordHandle() {
-  }
+			this.updatePasswordVisible = true
+			this.$nextTick(() => {
+				this.$refs.updatePassword.init()
+			})
+		},
+		// 退出
+		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'
+			})
+				.then(() => {
+					this.$http
+						.post(this.$http.adornUrl('/logout'))
+						.then(({ data: res }) => {
+							if (res.code !== 0) {
+								return this.$message.error(res.msg)
+							}
+							clearLoginInfo()
+							this.$router.push({ name: 'Login' })
+						})
+						.catch(() => {})
+				})
+				.catch(() => {})
+		}
+	}
 }
 </script>

src/views/main-sidebar-sub-menu.vue

@@ -1,38 +1,38 @@
 <template>
-  <el-submenu v-if="menu.children && menu.children.length >= 1" :index="menu.id" :popper-append-to-body="false">
+	<el-submenu v-if="menu.children && menu.children.length >= 1" :index="menu.id" :popper-append-to-body="false">
-    <template slot="title">
+		<template slot="title">
-      <svg class="icon-svg aui-sidebar__menu-icon" aria-hidden="true"><use :xlink:href="`#${menu.icon}`"></use></svg>
+			<svg class="icon-svg aui-sidebar__menu-icon" aria-hidden="true"><use :xlink:href="`#${menu.icon}`"></use></svg>
-      <span>{{ menu.name }}</span>
+			<span>{{ menu.name }}</span>
-    </template>
+		</template>
-    <sub-menu v-for="item in menu.children" :key="item.id" :menu="item"></sub-menu>
+		<sub-menu v-for="item in menu.children" :key="item.id" :menu="item"></sub-menu>
-  </el-submenu>
+	</el-submenu>
-  <el-menu-item v-else :index="menu.id" @click="gotoRouteHandle(menu.id)">
+	<el-menu-item v-else :index="menu.id" @click="gotoRouteHandle(menu.id)">
-    <svg class="icon-svg aui-sidebar__menu-icon" aria-hidden="true"><use :xlink:href="`#${menu.icon}`"></use></svg>
+		<svg class="icon-svg aui-sidebar__menu-icon" aria-hidden="true"><use :xlink:href="`#${menu.icon}`"></use></svg>
-    <span>{{ menu.name }}</span>
+		<span>{{ menu.name }}</span>
-  </el-menu-item>
+	</el-menu-item>
 </template>
 
 <script>
 import SubMenu from './main-sidebar-sub-menu'
 export default {
-  name: 'sub-menu',
+	name: 'sub-menu',
-  props: {
+	props: {
-    menu: {
+		menu: {
-      type: Object,
+			type: Object,
-      required: true
+			required: true
-    }
+		}
-  },
+	},
-  components: {
+	components: {
-    SubMenu
+		SubMenu
-  },
+	},
-  methods: {
+	methods: {
-    // 通过menuId与动态(菜单)路由进行匹配跳转至指定路由
+		// 通过menuId与动态(菜单)路由进行匹配跳转至指定路由
-    gotoRouteHandle (menuId) {
+		gotoRouteHandle(menuId) {
-      var route = window.SITE_CONFIG['dynamicMenuRoutes'].filter(item => item.meta.menuId === menuId)[0]
+			var route = window.SITE_CONFIG['dynamicMenuRoutes'].filter(item => item.meta.menuId === menuId)[0]
-      if (route) {
+			if (route) {
-        this.$router.push({ name: route.name })
+				this.$router.push({ name: route.name })
-      }
+			}
-    }
+		}
-  }
+	}
 }
 </script>

src/views/main-sidebar.vue

@@ -1,30 +1,58 @@
 <template>
-  <aside :class="['aui-sidebar', `aui-sidebar--${$store.state.sidebarLayoutSkin}`]">
+	<aside :class="['aui-sidebar', `aui-sidebar--${$store.state.sidebarLayoutSkin}`]">
-    <div class="aui-sidebar__inner">
+		<div class="aui-sidebar__inner">
-      <el-menu
+			<el-menu
-        :default-active="$store.state.sidebarMenuActiveName"
+				:default-active="$store.state.sidebarMenuActiveName"
-        :collapse="$store.state.sidebarFold"
+				:collapse="$store.state.sidebarFold"
-        :unique-opened="true"
+				:unique-opened="true"
-        :collapseTransition="false"
+				:collapseTransition="false"
-        class="aui-sidebar__menu">
+				class="aui-sidebar__menu"
-        <sub-menu v-for="menu in $store.state.sidebarMenuList" :key="menu.id" :menu="menu" />
+			>
-      </el-menu>
+				<sub-menu v-for="menu in unhiddenMenuList" :key="menu.id" :menu="menu" />
-    </div>
+			</el-menu>
-  </aside>
+		</div>
+	</aside>
 </template>
 
 <script>
 import SubMenu from './main-sidebar-sub-menu'
 export default {
-  data () {
+	data() {
-    return {
+		return {
-    }
+			unhiddenMenuList: []
-  },
+		}
-  components: {
+	},
-    SubMenu
+	components: {
-  },
+		SubMenu
-  created () {
+	},
-    this.$store.state.sidebarMenuList = window.SITE_CONFIG['menuList']
+	mounted() {
-  }
+		// this.$store.state.sidebarMenuList = window.SITE_CONFIG['menuList']
+		this.$nextTick(() => {
+			console.log(`window.SITE_CONFIG['menuList']`, window.SITE_CONFIG['menuList'])
+			this.unhiddenMenuList = this.getUnhiddenRoutesListFrom(window.SITE_CONFIG['menuList'])
+			/** 本地保存一份，store保存一份，感觉 store 都不需要保存... */
+			this.$store.state.sidebarMenuList = this.unhiddenMenuList
+		})
+	},
+	methods: {
+		getUnhiddenRoutesListFrom(fullList) {
+			const list = []
+			if (fullList.length) {
+				fullList.forEach(menu => {
+					if (menu.sort !== 99) {
+						/** 前后端约定，路由排序值为 99 时不在前端的侧边栏展示该路由 */
+						const newRouteItem = JSON.parse(JSON.stringify(menu))
+						if (menu.children) {
+							newRouteItem.children = this.getUnhiddenRoutesListFrom(menu.children)
+						}
+						list.push(newRouteItem)
+					} else {
+						// console.log(menu.name, '是应该被隐藏的路由')
+					}
+				})
+			}
+			return list
+		}
+	}
 }
 </script>

src/views/main.vue

@@ -1,13 +1,13 @@
 <template>
-  <div v-loading.fullscreen.lock="loading" :element-loading-text="$t('loading')" :class="['aui-wrapper', { 'aui-sidebar--fold': $store.state.sidebarFold }]">
+	<div v-loading.fullscreen.lock="loading" :element-loading-text="$t('loading')" :class="['aui-wrapper', { 'aui-sidebar--fold': $store.state.sidebarFold }]">
-    <template v-if="!loading">
+		<template v-if="!loading">
-      <main-navbar />
+			<main-navbar />
-      <main-sidebar />
+			<main-sidebar />
-      <div class="aui-content__wrapper">
+			<div class="aui-content__wrapper">
-        <main-content v-if="!$store.state.contentIsNeedRefresh" />
+				<main-content v-if="!$store.state.contentIsNeedRefresh" />
-      </div>
+			</div>
-    </template>
+		</template>
-  </div>
+	</div>
 </template>
 
 <script>
@@ -16,87 +16,94 @@ import MainSidebar from './main-sidebar'
 import MainContent from './main-content'
 import debounce from 'lodash/debounce'
 export default {
-  provide () {
+	provide() {
-    return {
+		return {
-      // 刷新
+			// 刷新
-      refresh () {
+			refresh() {
-        this.$store.state.contentIsNeedRefresh = true
+				this.$store.state.contentIsNeedRefresh = true
-        this.$nextTick(() => {
+				this.$nextTick(() => {
-          this.$store.state.contentIsNeedRefresh = false
+					this.$store.state.contentIsNeedRefresh = false
-        })
+				})
-      }
+			}
-    }
+		}
-  },
+	},
-  data () {
+	data() {
-    return {
+		return {
-      loading: true
+			loading: true
-    }
+		}
-  },
+	},
-  components: {
+	components: {
-    MainNavbar,
+		MainNavbar,
-    MainSidebar,
+		MainSidebar,
-    MainContent
+		MainContent
-  },
+	},
-  watch: {
+	watch: {
-    $route: 'routeHandle'
+		$route: 'routeHandle'
-  },
+	},
-  created () {
+	created() {
-    this.windowResizeHandle()
+		this.windowResizeHandle()
-    this.routeHandle(this.$route)
+		this.routeHandle(this.$route)
-    Promise.all([
+		Promise.all([this.getUserInfo(), this.getPermissions()]).then(() => {
-      this.getUserInfo(),
+			this.loading = false
-      this.getPermissions()
+		})
-    ]).then(() => {
+	},
-      this.loading = false
+	methods: {
-    })
+		// 窗口改变大小
-  },
+		windowResizeHandle() {
-  methods: {
+			this.$store.state.sidebarFold = document.documentElement['clientWidth'] <= 992 || false
-    // 窗口改变大小
+			window.addEventListener(
-    windowResizeHandle () {
+				'resize',
-      this.$store.state.sidebarFold = document.documentElement['clientWidth'] <= 992 || false
+				// 防抖
-      window.addEventListener('resize', debounce(() => {
+				debounce(() => {
-        this.$store.state.sidebarFold = document.documentElement['clientWidth'] <= 992 || false
+					this.$store.state.sidebarFold = document.documentElement['clientWidth'] <= 992 || false
-      }, 150))
+				}, 150)
-    },
+			)
-    // 路由, 监听
+		},
-    routeHandle (route) {
+		// 路由, 监听
-      if (!route.meta.isTab) {
+		routeHandle(route) {
-        return false
+			if (!route.meta.isTab) {
-      }
+				return false
-      var tab = this.$store.state.contentTabs.filter(item => item.name === route.name)[0]
+			}
-      if (!tab) {
+			var tab = this.$store.state.contentTabs.filter(item => item.name === route.name)[0]
-        tab = {
+			if (!tab) {
-          ...window.SITE_CONFIG['contentTabDefault'],
+				tab = {
-          ...route.meta,
+					...window.SITE_CONFIG['contentTabDefault'],
-          'name': route.name,
+					...route.meta,
-          'params': { ...route.params },
+					name: route.name,
-          'query': { ...route.query }
+					params: { ...route.params },
-        }
+					query: { ...route.query }
-        this.$store.state.contentTabs = this.$store.state.contentTabs.concat(tab)
+				}
-      }
+				this.$store.state.contentTabs = this.$store.state.contentTabs.concat(tab)
-      this.$store.state.sidebarMenuActiveName = tab.menuId
+			}
-      this.$store.state.contentTabsActiveName = tab.name
+			this.$store.state.sidebarMenuActiveName = tab.menuId
-    },
+			this.$store.state.contentTabsActiveName = tab.name
-    // 获取当前管理员信息
+		},
-    getUserInfo () {
+		// 获取当前管理员信息
-      return this.$http.get('/sys/user/info').then(({ data: res }) => {
+		getUserInfo() {
-        if (res.code !== 0) {
+			return this.$http
-          return this.$message.error(res.msg)
+				.get(this.$http.adornUrl('/sys/user/info'))
-        }
+				.then(({ data: res }) => {
-        this.$store.state.user.id = res.data.id
+					if (res.code !== 0) {
-        this.$store.state.user.name = res.data.username
+						return this.$message.error(res.msg)
-        this.$store.state.user.superAdmin = res.data.superAdmin
+					}
-      }).catch(() => {})
+					this.$store.state.user.id = res.data.id
-    },
+					this.$store.state.user.name = res.data.username
-    // 获取权限
+					this.$store.state.user.superAdmin = res.data.superAdmin
-    getPermissions () {
+				})
-      return this.$http.get('/sys/menu/permissions').then(({ data: res }) => {
+				.catch(() => {})
-        if (res.code !== 0) {
+		},
-          return this.$message.error(res.msg)
+		// 获取权限
-        }
+		getPermissions() {
-        window.SITE_CONFIG['permissions'] = res.data
+			return this.$http
-      }).catch(() => {})
+				.get(this.$http.adornUrl('/sys/menu/permissions'))
-    }
+				.then(({ data: res }) => {
-  }
+					if (res.code !== 0) {
+						return this.$message.error(res.msg)
+					}
+					window.SITE_CONFIG['permissions'] = res.data
+				})
+				.catch(() => {})
+		}
+	}
 }
 </script>

src/views/modules/home.vue

@@ -1,31 +1,47 @@
+<!--
+ * @Descripttion: 
+ * @version: 
+ * @Author: fzq
+ * @Date: 2022-12-09 15:44:37
+ * @LastEditors: fzq
+ * @LastEditTime: 2022-12-11 20:47:56
+-->
 <template>
-  <el-card shadow="never" class="aui-card--fill">
+	<el-card shadow="never" class="aui-card--fill">
-    <div class="mod-home">
+		<!-- <div class="mod-home">
-      <h3>项目介绍</h3>
+			<h3>项目介绍</h3>
-      <ul>
+			<ul>
-        <li>renren-ui基于vue、element-ui构建开发，实现<a href="https://gitee.com/renrenio/renren-ui" target="_blank">renren-security</a>后台管理前端功能，提供一套更优的前端解决方案</li>
+				<li>
-        <li>前后端分离，通过token进行数据交互，可独立部署</li>
+					renren-ui基于vue、element-ui构建开发，实现<a href="https://gitee.com/renrenio/renren-ui" target="_blank">renren-security</a>后台管理前端功能，提供一套更优的前端解决方案
-        <li>动态菜单，通过菜单管理统一管理访问路由</li>
+				</li>
-        <li>演示地址：<a href="http://demo.open.renren.io/renren-security" target="_blank">http://demo.open.renren.io/renren-security</a> (账号密码：admin/admin)</li>
+				<li>前后端分离，通过token进行数据交互，可独立部署</li>
-      </ul>
+				<li>动态菜单，通过菜单管理统一管理访问路由</li>
-      <h3>获取帮助</h3>
+				<li>演示地址：<a href="http://demo.open.renren.io/renren-security" target="_blank">http://demo.open.renren.io/renren-security</a> (账号密码：admin/admin)</li>
-      <ul>
+			</ul>
-        <li>官方社区：<a href="https://www.renren.io/community" target="_blank">https://www.renren.io/community</a></li>
+			<h3>获取帮助</h3>
-        <li>前端Git地址：<a href="https://gitee.com/renrenio/renren-ui" target="_blank">https://gitee.com/renrenio/renren-ui</a></li>
+			<ul>
-        <li>后台Git地址：<a href="https://gitee.com/renrenio/renren-security" target="_blank">https://gitee.com/renrenio/renren-security</a></li>
+				<li>官方社区：<a href="https://www.renren.io/community" target="_blank">https://www.renren.io/community</a></li>
-        <li>如需关注项目最新动态，请Watch、Star项目，同时也是对项目最好的支持</li>
+				<li>前端Git地址：<a href="https://gitee.com/renrenio/renren-ui" target="_blank">https://gitee.com/renrenio/renren-ui</a></li>
-      </ul>
+				<li>后台Git地址：<a href="https://gitee.com/renrenio/renren-security" target="_blank">https://gitee.com/renrenio/renren-security</a></li>
-      <h3>官方微信群</h3>
+				<li>如需关注项目最新动态，请Watch、Star项目，同时也是对项目最好的支持</li>
-      <ul>
+			</ul>
-        <li>扫码下面的二维码，关注【人人开源】公众号，回复【加群】，即可根据提示加入微信群！</li>
+			<h3>官方微信群</h3>
-        <li><img src="https://cdn.renren.io/f5cef202207132229319338.jpg" alt="微信群" /></li>
+			<ul>
-      </ul>
+				<li>扫码下面的二维码，关注【人人开源】公众号，回复【加群】，即可根据提示加入微信群！</li>
-    </div>
+			</ul>
-  </el-card>
+		</div> -->
+	</el-card>
 </template>
 
+<script>
+export default {
+		created() {
+		this.$router.replace({ name: 'sys-log-login' })
+	},
+}
+</script>
 <style>
 .mod-home {
-  line-height: 1.5;
+	line-height: 1.5;
 }
 </style>

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(() => {
@@ -72,7 +78,7 @@ export default {
     },
     // 获取信息
     getInfo () {
-      this.$http.get(`/sys/schedule/${this.dataForm.id}`).then(({ data: res }) => {
+      this.$http.get(this.$http.adornUrl(`/sys/schedule/${this.dataForm.id}`)).then(({ data: res }) => {
         if (res.code !== 0) {
           return this.$message.error(res.msg)
         }
@@ -85,7 +91,7 @@ export default {
         if (!valid) {
           return false
         }
-        this.$http[!this.dataForm.id ? 'post' : 'put']('/sys/schedule', this.dataForm).then(({ data: res }) => {
+        this.$http[!this.dataForm.id ? 'post' : 'put'](this.$http.adornUrl('/sys/schedule'), this.dataForm).then(({ data: res }) => {
           if (res.code !== 0) {
             return this.$message.error(res.msg)
           }

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,13 +56,19 @@ export default {
     }
   },
   methods: {
+		// destroy dialog
+		handleDestroyDialog() {
+			setTimeout(() => {
+				this.addOrUpdateVisible= false
+			}, /** after dialog animated */ 200);
+		},
     init () {
       this.visible = true
       this.getDataList()
     },
     // 失败信息
     showErrorInfo (id) {
-      this.$http.get(`/sys/scheduleLog/${id}`).then(({ data: res }) => {
+      this.$http.get(this.$http.adornUrl(`/sys/scheduleLog/${id}`)).then(({ data: res }) => {
         if (res.code !== 0) {
           return this.$message.error(res.msg)
         }

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) {
@@ -111,7 +117,7 @@ export default {
         cancelButtonText: this.$t('cancel'),
         type: 'warning'
       }).then(() => {
-        this.$http.put('/sys/schedule/pause', id ? [id] : this.dataListSelections.map(item => item.id)).then(({ data: res }) => {
+        this.$http.put(this.$http.adornUrl('/sys/schedule/pause'), id ? [id] : this.dataListSelections.map(item => item.id)).then(({ data: res }) => {
           if (res.code !== 0) {
             return this.$message.error(res.msg)
           }
@@ -140,7 +146,7 @@ export default {
         cancelButtonText: this.$t('cancel'),
         type: 'warning'
       }).then(() => {
-        this.$http.put('/sys/schedule/resume', id ? [id] : this.dataListSelections.map(item => item.id)).then(({ data: res }) => {
+        this.$http.put(this.$http.adornUrl('/sys/schedule/resume'), id ? [id] : this.dataListSelections.map(item => item.id)).then(({ data: res }) => {
           if (res.code !== 0) {
             return this.$message.error(res.msg)
           }
@@ -169,7 +175,7 @@ export default {
         cancelButtonText: this.$t('cancel'),
         type: 'warning'
       }).then(() => {
-        this.$http.put('/sys/schedule/run', id ? [id] : this.dataListSelections.map(item => item.id)).then(({ data: res }) => {
+        this.$http.put(this.$http.adornUrl('/sys/schedule/run'), id ? [id] : this.dataListSelections.map(item => item.id)).then(({ data: res }) => {
           if (res.code !== 0) {
             return this.$message.error(res.msg)
           }

src/views/modules/monitoring/equipment.vue

@@ -0,0 +1,532 @@
+<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: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
+			: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: 'name', name: i18n.t('eq.name') },
+	{ prop: 'code', name: i18n.t('eq.code') },
+	{ prop: 'equipmentTypeName', name: i18n.t('eq.type') },
+	{ 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'),
+		subcomponent: TableTextComponent,
+		actionName: 'view-detail'
+	},
+	{
+		prop: 'operations',
+		name: i18n.t('handle'),
+		fixed: 'right',
+		width: 180,
+		subcomponent: TableOperateComponent,
+		options: ['edit', 'delete']
+	}
+]
+
+const addOrUpdateConfigs = {
+	type: 'dialog',
+	infoUrl: '/monitoring/equipment',
+	fields: [
+		{ name: 'name', label: i18n.t('eq.name'), required: true },
+		{ 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') },
+		{
+			name: 'equipmentTypeId',
+			label: i18n.t('eq.type'),
+			required: true,
+			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'),
+			required: true,
+			type: 'select',
+			options: []
+		},
+		{
+			name: 'productionTime',
+			label: i18n.t('produceTime'),
+			type: 'date',
+			props: {
+				'type': 'date', // element-ui 的配置
+				'placeholder': i18n.t('hints.date'),
+				'value-format': 'yyyy-MM-ddTHH:mm:ss',
+				'style': {
+					width: '100%'
+				}
+			}
+		},
+		{
+			name: 'enterTime',
+			label: i18n.t('enterTime'),
+			type: 'date',
+			props: {
+				'type': 'date', // element-ui 的配置
+				'placeholder': i18n.t('hints.date'),
+				'value-format': 'yyyy-MM-ddTHH:mm:ss',
+				'style': {
+					width: '100%'
+				}
+			}
+		},
+		{
+			name: 'tvalue',
+			label: i18n.t('eq.tvalue'),
+			required: true,
+			rules: [
+				{
+					type: 'number',
+					message: i18n.t('hints.number'),
+					trigger: 'blur',
+					transform: val => Number(val)
+				}
+			]
+		},
+		{
+			name: 'processingTime',
+			label: i18n.t('eq.processingTime'),
+			rules: [
+				{
+					type: 'number',
+					message: i18n.t('hints.number'),
+					trigger: 'blur',
+					transform: val => Number(val)
+				}
+			]
+		},
+		{ name: 'manufacturer', label: i18n.t('manufacturer') },
+		{ name: 'spec', label: i18n.t('eq.grade') },
+		{
+			name: 'dataType',
+			label: i18n.t('eq.dtype'),
+			required: true,
+			type: 'select',
+			options: [
+				{ value: 0, label: i18n.t('eq.dtypenone') },
+				{ value: 1, label: i18n.t('eq.dtypeinput') },
+				{ value: 2, label: i18n.t('eq.dtypeoutput') }
+			]
+		},
+		{ name: 'remark', label: i18n.t('remark') }
+	],
+	extraComponents: [
+		{
+			name: 'description',
+			hasModel: true,
+			label: i18n.t('desc'),
+			fieldType: 'string',
+			component: CKEditor.component,
+			props: {
+				// value: 'tests',
+				config: {
+					// ckeditor 的配置: https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html
+					// toolbar: [['Bold']]
+					language: Cookies.get('language') || 'en'
+				}
+			}
+		},
+		{
+			name: 'files',
+			label: i18n.t('upload.title'),
+			fieldType: 'array',
+			component: () => import('@/components/base-upload'),
+			props: {
+				// 上传组件需要的 props
+				url: '/monitoring/attachment/uploadFileFormData',
+				extraParams: { typeCode: 'EquipmentInfoFile' },
+				buttonContent: i18n.t('upload.button'),
+				tip: i18n.t('hints.upload2m')
+			}
+		},
+		{
+			name: 'files',
+			label: i18n.t('eq.image'),
+			fieldType: 'array',
+			component: () => import('@/components/base-upload'),
+			props: {
+				// 上传组件需要的 props
+				url: '/monitoring/attachment/uploadFileFormData',
+				extraParams: { typeCode: 'EquipmentInfoImage' },
+				buttonContent: i18n.t('upload.button'),
+				tip: i18n.t('hints.upload2mPic')
+			}
+		}
+	],
+	subtable: {
+		title: i18n.t('eq.viewattr'),
+		url: '/monitoring/equipmentAttr',
+		relatedField: 'equipmentId',
+		tableConfigs: [
+			{ type: 'index', width: 100, name: i18n.t('index') },
+			{ prop: 'createTime', name: i18n.t('createTime'), filter: timeFilter },
+			{ prop: 'attrName', name: i18n.t('attrName'), formField: true },
+			{ prop: 'attrValue', name: i18n.t('attrValue'), formField: true },
+			{
+				prop: 'operations',
+				name: i18n.t('handle'),
+				fixed: 'right',
+				width: 180,
+				subcomponent: TableOperateComponent,
+				options: ['edit', 'delete']
+			}
+		]
+	},
+	operations: [
+		{ name: 'cancel', showAlways: true },
+		{
+			name: 'save',
+			url: '/monitoring/equipment',
+			permission: 'monitoring:equipment:save',
+			showOnEdit: false
+		},
+		{
+			name: 'update',
+			url: '/monitoring/equipment',
+			permission: 'monitoring:equipment: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() {
+		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({
+				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/equipment/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 'lineId':
+					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/equipment'),
+					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/equipmentAlarmLog-add-or-update.vue

@@ -0,0 +1,163 @@
+<template>
+	<el-dialog :title="!dataForm.id ? i18n.t('add') : i18n.t('update')" :close-on-click-modal="false" :visible.sync="visible">
+		<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
+			<el-form-item label="报警信息ID，关联T_equipment_group_alarm表" prop="alarmId">
+				<el-input v-model="dataForm.alarmId" placeholder="报警信息ID，关联T_equipment_group_alarm表"></el-input>
+			</el-form-item>
+			<el-form-item label="报警来源" prop="alarmSource">
+				<el-input v-model="dataForm.alarmSource" placeholder="报警来源"></el-input>
+			</el-form-item>
+			<el-form-item label="报警详细内容" prop="alarmContent">
+				<el-input v-model="dataForm.alarmContent" placeholder="报警详细内容"></el-input>
+			</el-form-item>
+			<el-form-item label="报警设备id 关联equipment表" prop="alarmEquipmentId">
+				<el-input v-model="dataForm.alarmEquipmentId" placeholder="报警设备id 关联equipment表"></el-input>
+			</el-form-item>
+			<el-form-item label="备注" prop="remark">
+				<el-input v-model="dataForm.remark" placeholder="备注"></el-input>
+			</el-form-item>
+			<el-form-item label="删除标志，是否有效:1 可用 0不可用" prop="valid">
+				<el-input v-model="dataForm.valid" placeholder="删除标志，是否有效:1 可用 0不可用"></el-input>
+			</el-form-item>
+			<el-form-item :label="$t('creator')" prop="creatorId">
+				<el-input v-model="dataForm.creatorId" :placeholder="$t('creator')"></el-input>
+			</el-form-item>
+			<el-form-item :label="$t('creatorName')" prop="creatorName">
+				<el-input v-model="dataForm.creatorName" :placeholder="$t('creatorName')"></el-input>
+			</el-form-item>
+			<el-form-item label="创建时间" prop="createTime">
+				<el-input v-model="dataForm.createTime" placeholder="创建时间"></el-input>
+			</el-form-item>
+			<el-form-item :label="$t('updator')" prop="updaterId">
+				<el-input v-model="dataForm.updaterId" :placeholder="$t('updator')"></el-input>
+			</el-form-item>
+			<el-form-item :label="$t('updatorName')" prop="updaterName">
+				<el-input v-model="dataForm.updaterName" :placeholder="$t('updatorName')"></el-input>
+			</el-form-item>
+			<el-form-item :label="$t('updateTime')" prop="updateTime">
+				<el-input v-model="dataForm.updateTime" :placeholder="$t('updateTime')"></el-input>
+			</el-form-item>
+			<el-form-item :label="$t('version')" prop="version">
+				<el-input v-model="dataForm.version" :placeholder="$t('version')"></el-input>
+			</el-form-item>
+		</el-form>
+		<span slot="footer" class="dialog-footer">
+			<el-button @click="visible = false">{{ $t('cancel') }}</el-button>
+			<el-button type="primary" @click="dataFormSubmit()">{{ $t('confirm') }}</el-button>
+		</span>
+	</el-dialog>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			visible: false,
+			dataForm: {
+				id: 0,
+				alarmId: '',
+				alarmSource: '',
+				alarmContent: '',
+				alarmEquipmentId: '',
+				remark: '',
+				valid: '',
+				creatorId: '',
+				creatorName: '',
+				createTime: '',
+				updaterId: '',
+				updaterName: '',
+				updateTime: '',
+				version: ''
+			},
+			dataRule: {
+				alarmId: [{ required: true, message: '报警信息ID，关联T_equipment_group_alarm表不能为空', trigger: 'blur' }],
+				alarmSource: [{ required: true, message: '报警来源不能为空', trigger: 'blur' }],
+				alarmContent: [{ required: true, message: '报警详细内容不能为空', trigger: 'blur' }],
+				alarmEquipmentId: [{ required: true, message: '报警设备id 关联equipment表不能为空', trigger: 'blur' }],
+				remark: [{ required: true, message: '备注不能为空', trigger: 'blur' }],
+				valid: [{ required: true, message: '删除标志，是否有效:1 可用 0不可用不能为空', trigger: 'blur' }],
+				creatorId: [{ required: true, message: '创建人不能为空', trigger: 'blur' }],
+				creatorName: [{ required: true, message: '创建人姓名不能为空', trigger: 'blur' }],
+				createTime: [{ required: true, message: '创建时间不能为空', trigger: 'blur' }],
+				updaterId: [{ required: true, message: '更新人不能为空', trigger: 'blur' }],
+				updaterName: [{ required: true, message: '更新人姓名不能为空', trigger: 'blur' }],
+				updateTime: [{ required: true, message: '更新时间不能为空', trigger: 'blur' }],
+				version: [{ required: true, message: '版本号不能为空', trigger: 'blur' }]
+			}
+		}
+	},
+	methods: {
+		init(id) {
+			this.dataForm.id = id || 0
+			this.visible = true
+			this.$nextTick(() => {
+				this.$refs['dataForm'].resetFields()
+				if (this.dataForm.id) {
+					this.$http({
+						url: this.$http.adornUrl(`/monitoring/equipmentAlarmLog/${this.dataForm.id}`),
+						method: 'get',
+						params: this.$http.adornParams()
+					}).then(({ data }) => {
+						if (data && data.code === 0) {
+							this.dataForm.alarmId = data.equipmenalarmLog.alarmId
+							this.dataForm.alarmSource = data.equipmenalarmLog.alarmSource
+							this.dataForm.alarmContent = data.equipmenalarmLog.alarmContent
+							this.dataForm.alarmEquipmentId = data.equipmenalarmLog.alarmEquipmentId
+							this.dataForm.remark = data.equipmenalarmLog.remark
+							this.dataForm.valid = data.equipmenalarmLog.valid
+							this.dataForm.creatorId = data.equipmenalarmLog.creatorId
+							this.dataForm.creatorName = data.equipmenalarmLog.creatorName
+							this.dataForm.createTime = data.equipmenalarmLog.createTime
+							this.dataForm.updaterId = data.equipmenalarmLog.updaterId
+							this.dataForm.updaterName = data.equipmenalarmLog.updaterName
+							this.dataForm.updateTime = data.equipmenalarmLog.updateTime
+							this.dataForm.version = data.equipmenalarmLog.version
+						}
+					})
+				}
+			})
+		},
+		// 表单提交
+		dataFormSubmit() {
+			this.$refs['dataForm'].validate(valid => {
+				if (valid) {
+					this.$http({
+						url: this.$http.adornUrl(`/monitoring/equipmentAlarmLog/${!this.dataForm.id ? '' : this.dataForm.id}`),
+						method: this.dataForm.id ? 'put' : 'post',
+						data: this.$http.adornData({
+							id: this.dataForm.id || undefined,
+							alarmId: this.dataForm.alarmId,
+							alarmSource: this.dataForm.alarmSource,
+							alarmContent: this.dataForm.alarmContent,
+							alarmEquipmentId: this.dataForm.alarmEquipmentId,
+							remark: this.dataForm.remark,
+							valid: this.dataForm.valid,
+							creatorId: this.dataForm.creatorId,
+							creatorName: this.dataForm.creatorName,
+							createTime: this.dataForm.createTime,
+							updaterId: this.dataForm.updaterId,
+							updaterName: this.dataForm.updaterName,
+							updateTime: this.dataForm.updateTime,
+							version: this.dataForm.version
+						})
+					}).then(({ data }) => {
+						if (data && data.code === 0) {
+							this.$message({
+								message: i18n.t('prompt.success'),
+								type: 'success',
+								duration: 1500,
+								onClose: () => {
+									this.visible = false
+									this.$emit('refreshDataList')
+								}
+							})
+						} else {
+							this.$message.error(data.msg)
+						}
+					})
+				}
+			})
+		}
+	}
+}
+</script>

src/views/modules/monitoring/equipmentAlarmLog.vue

@@ -0,0 +1,164 @@
+<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('parameter')" clearable></el-input>
+			</el-form-item>
+			<el-form-item>
+				<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 :page="pageIndex" :size="pageSize" :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" />
+		<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" @refreshDataList="getDataList"></add-or-update>
+	</div>
+</template>
+
+<script>
+import AddOrUpdate from './equipmentAlarmLog-add-or-update'
+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 { calcMaxHeight } from '@/utils'
+import { timeFilter } from '@/utils/filters'
+const tableConfigs = [
+	{ prop: 'id', name: 'ID' },
+	{ prop: 'alarmId', name: '报警信息ID，关联T_equipment_group_alarm表' },
+	{ prop: 'alarmSource', name: '报警来源' },
+	{ prop: 'alarmContent', name: '报警详细内容' },
+	{ prop: 'alarmEquipmentId', name: '报警设备id 关联equipment表' },
+	{ prop: 'remark', name: i18n.t('remark') },
+	{ prop: 'valid', name: i18n.t('delMark') },
+	{ prop: 'creatorId', name: i18n.t('creator') },
+	{ prop: 'creatorName', name: i18n.t('creatorName') },
+	{ prop: 'createTime', name: i18n.t('createTime'), filter: timeFilter },
+	{ prop: 'updaterId', name: i18n.t('updator') },
+	{ prop: 'updaterName', name: i18n.t('updatorName') },
+	{ prop: 'updateTime', name: i18n.t('updateTime'), filter: timeFilter },
+	{ prop: 'version', name: i18n.t('version') },
+	{ prop: 'operations', name: i18n.t('handle'), fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['edit', 'delete'] }
+]
+
+export default {
+	data() {
+		return {
+			tableConfigs,
+			calcMaxHeight,
+			dataForm: {
+				key: ''
+			},
+			dataList: [],
+			pageIndex: 1,
+			pageSize: 10,
+			totalPage: 0,
+			dataListLoading: false,
+			dataListSelections: [],
+			addOrUpdateVisible: false
+		}
+	},
+	components: {
+		AddOrUpdate,
+		BaseTable
+	},
+	activated() {
+		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/equipmentAlarmLog/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.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
+		},
+		// 新增 / 修改
+		addOrUpdateHandle(id) {
+			this.addOrUpdateVisible = true
+			this.$nextTick(() => {
+				this.$refs.addOrUpdate.init(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/equipmentAlarmLog'),
+					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/equipmentAttr-add-or-update.vue

@@ -0,0 +1,156 @@
+<template>
+	<el-dialog :title="!dataForm.id ? i18n.t('add') : i18n.t('update')" :close-on-click-modal="false" :visible.sync="visible">
+		<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
+			<el-form-item label="设备ID" prop="equipmentId">
+				<el-input v-model="dataForm.equipmentId" placeholder="设备ID"></el-input>
+			</el-form-item>
+			<el-form-item label="属性名称" prop="attrName">
+				<el-input v-model="dataForm.attrName" placeholder="属性名称"></el-input>
+			</el-form-item>
+			<el-form-item label="属性值" prop="attrValue">
+				<el-input v-model="dataForm.attrValue" placeholder="属性值"></el-input>
+			</el-form-item>
+			<el-form-item label="备注" prop="remark">
+				<el-input v-model="dataForm.remark" placeholder="备注"></el-input>
+			</el-form-item>
+			<el-form-item label="删除标志，是否有效:1 可用 0不可用" prop="valid">
+				<el-input v-model="dataForm.valid" placeholder="删除标志，是否有效:1 可用 0不可用"></el-input>
+			</el-form-item>
+			<el-form-item :label="$t('creator')" prop="creatorId">
+				<el-input v-model="dataForm.creatorId" :placeholder="$t('creator')"></el-input>
+			</el-form-item>
+			<el-form-item :label="$t('creatorName')" prop="creatorName">
+				<el-input v-model="dataForm.creatorName" :placeholder="$t('creatorName')"></el-input>
+			</el-form-item>
+			<el-form-item label="创建时间" prop="createTime">
+				<el-input v-model="dataForm.createTime" placeholder="创建时间"></el-input>
+			</el-form-item>
+			<el-form-item :label="$t('updator')" prop="updaterId">
+				<el-input v-model="dataForm.updaterId" :placeholder="$t('updator')"></el-input>
+			</el-form-item>
+			<el-form-item :label="$t('updatorName')" prop="updaterName">
+				<el-input v-model="dataForm.updaterName" :placeholder="$t('updatorName')"></el-input>
+			</el-form-item>
+			<el-form-item :label="$t('updateTime')" prop="updateTime">
+				<el-input v-model="dataForm.updateTime" :placeholder="$t('updateTime')"></el-input>
+			</el-form-item>
+			<el-form-item :label="$t('version')" prop="version">
+				<el-input v-model="dataForm.version" :placeholder="$t('version')"></el-input>
+			</el-form-item>
+		</el-form>
+		<span slot="footer" class="dialog-footer">
+			<el-button @click="visible = false">{{ $t('cancel') }}</el-button>
+			<el-button type="primary" @click="dataFormSubmit()">{{ $t('confirm') }}</el-button>
+		</span>
+	</el-dialog>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			visible: false,
+			dataForm: {
+				id: 0,
+				equipmentId: '',
+				attrName: '',
+				attrValue: '',
+				remark: '',
+				valid: '',
+				creatorId: '',
+				creatorName: '',
+				createTime: '',
+				updaterId: '',
+				updaterName: '',
+				updateTime: '',
+				version: ''
+			},
+			dataRule: {
+				equipmentId: [{ required: true, message: '设备ID不能为空', trigger: 'blur' }],
+				attrName: [{ required: true, message: '属性名称不能为空', trigger: 'blur' }],
+				attrValue: [{ required: true, message: '属性值不能为空', trigger: 'blur' }],
+				remark: [{ required: true, message: '备注不能为空', trigger: 'blur' }],
+				valid: [{ required: true, message: '删除标志，是否有效:1 可用 0不可用不能为空', trigger: 'blur' }],
+				creatorId: [{ required: true, message: '创建人不能为空', trigger: 'blur' }],
+				creatorName: [{ required: true, message: '创建人姓名不能为空', trigger: 'blur' }],
+				createTime: [{ required: true, message: '创建时间不能为空', trigger: 'blur' }],
+				updaterId: [{ required: true, message: '更新人不能为空', trigger: 'blur' }],
+				updaterName: [{ required: true, message: '更新人姓名不能为空', trigger: 'blur' }],
+				updateTime: [{ required: true, message: '更新时间不能为空', trigger: 'blur' }],
+				version: [{ required: true, message: '版本号不能为空', trigger: 'blur' }]
+			}
+		}
+	},
+	methods: {
+		init(id) {
+			this.dataForm.id = id || 0
+			this.visible = true
+			this.$nextTick(() => {
+				this.$refs['dataForm'].resetFields()
+				if (this.dataForm.id) {
+					this.$http({
+						url: this.$http.adornUrl(`/monitoring/equipmentAttr/${this.dataForm.id}`),
+						method: 'get',
+						params: this.$http.adornParams()
+					}).then(({ data }) => {
+						if (data && data.code === 0) {
+							this.dataForm.equipmentId = data.equipmenattr.equipmentId
+							this.dataForm.attrName = data.equipmenattr.attrName
+							this.dataForm.attrValue = data.equipmenattr.attrValue
+							this.dataForm.remark = data.equipmenattr.remark
+							this.dataForm.valid = data.equipmenattr.valid
+							this.dataForm.creatorId = data.equipmenattr.creatorId
+							this.dataForm.creatorName = data.equipmenattr.creatorName
+							this.dataForm.createTime = data.equipmenattr.createTime
+							this.dataForm.updaterId = data.equipmenattr.updaterId
+							this.dataForm.updaterName = data.equipmenattr.updaterName
+							this.dataForm.updateTime = data.equipmenattr.updateTime
+							this.dataForm.version = data.equipmenattr.version
+						}
+					})
+				}
+			})
+		},
+		// 表单提交
+		dataFormSubmit() {
+			this.$refs['dataForm'].validate(valid => {
+				if (valid) {
+					this.$http({
+						url: this.$http.adornUrl(`/monitoring/equipmentAttr/${!this.dataForm.id ? '' : this.dataForm.id}`),
+						method: this.dataForm.id ? 'put' : 'post',
+						data: this.$http.adornData({
+							id: this.dataForm.id || undefined,
+							equipmentId: this.dataForm.equipmentId,
+							attrName: this.dataForm.attrName,
+							attrValue: this.dataForm.attrValue,
+							remark: this.dataForm.remark,
+							valid: this.dataForm.valid,
+							creatorId: this.dataForm.creatorId,
+							creatorName: this.dataForm.creatorName,
+							createTime: this.dataForm.createTime,
+							updaterId: this.dataForm.updaterId,
+							updaterName: this.dataForm.updaterName,
+							updateTime: this.dataForm.updateTime,
+							version: this.dataForm.version
+						})
+					}).then(({ data }) => {
+						if (data && data.code === 0) {
+							this.$message({
+								message: i18n.t('prompt.success'),
+								type: 'success',
+								duration: 1500,
+								onClose: () => {
+									this.visible = false
+									this.$emit('refreshDataList')
+								}
+							})
+						} else {
+							this.$message.error(data.msg)
+						}
+					})
+				}
+			})
+		}
+	}
+}
+</script>

src/views/modules/monitoring/equipmentCurrentState.vue

@@ -0,0 +1,258 @@
+<template>
+	<div class="mod-config">
+		<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" />
+				</el-select>
+			</el-form-item>
+			<el-form-item>
+				<el-select v-model="dataForm.equipmentId" :placeholder="'设备名称'" clearable>
+					<el-option v-for="eq in eqList" :key="eq.code" :value="eq.id" :label="eq.name" />
+				</el-select>
+			</el-form-item>
+			<el-form-item>
+				<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 :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" @destory-dialog="handleDestroyDialog" />
+	</div>
+</template>
+
+<script>
+import { calcMaxHeight } from '@/utils'
+import { timeFilter } from '@/utils/filters'
+import AddOrUpdate from '@/components/base-dialog/addOrUpdate'
+// import AddOrUpdate from './equipmentGroup-add-or-update'
+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'
+
+const tableConfigs = [
+	{
+		type: 'index',
+		name: i18n.t('index')
+	},
+	{ prop: 'equipmentName', name: i18n.t('realtime.eqName') },
+	{ prop: 'equipmentCode', name: i18n.t('realtime.eqCode') },
+	{ prop: 'inputNum', name: i18n.t('realtime.input') },
+	{ prop: 'outputNum', name: i18n.t('realtime.output') },
+	{
+		prop: 'run',
+		name: i18n.t('realtime.runState'),
+		filter: val => {
+			if (val !== null && val !== undefined) return val ? '是' : '否'
+		}
+	},
+	{
+		prop: 'status',
+		name: i18n.t('realtime.state'),
+		filter: val => {
+			if (val !== null && val !== undefined) return ['正常', '计划停机', '故障'][+val]
+		}
+	},
+	{
+		prop: 'error',
+		name: i18n.t('realtime.hasFault'),
+		filter: val => {
+			if (val !== null && val !== undefined) return val ? '是' : '否'
+		}
+	},
+	{ 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,
+		emitFullData: true,
+		actionName: 'view-alarm'
+	}
+	// { prop: 'operations', name: i18n.t('handle'), fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['edit', 'delete'] }
+]
+
+const addOrUpdateConfigs = {
+	type: 'dialog',
+	infoUrl: '/monitoring/equipmentGroup',
+	fields: [{ name: 'name', label: i18n.t('eq.groupname') }, { name: 'code', label: i18n.t('eq.groupcode') }, 'remark'],
+	operations: [
+		{ name: 'cancel', showAlways: true },
+		{ name: 'save', url: '/monitoring/equipmentGroup', permission: 'monitoring:equipmentgroup:save', showOnEdit: false },
+		{ name: 'update', url: '/monitoring/equipmentGroup', permission: 'monitoring:equipmentgroup:update', showOnEdit: true }
+	]
+}
+
+export default {
+	data() {
+		return {
+			addOrUpdateConfigs,
+			calcMaxHeight,
+			tableConfigs,
+			dataForm: {
+				equipmentId: '',
+				lineId: ''
+			},
+			dataList: [],
+			eqList: [],
+			lineList: [],
+			pageIndex: 1,
+			pageSize: 10,
+			totalPage: 0,
+			dataListLoading: false,
+			dataListSelections: [],
+			addOrUpdateVisible: false
+		}
+	},
+	components: {
+		AddOrUpdate,
+		BaseTable
+	},
+	activated() {
+		this.getEqList()
+		this.getLineList()
+		this.getDataList()
+	},
+	methods: {
+		// destroy dialog
+		handleDestroyDialog() {
+			setTimeout(() => {
+				this.addOrUpdateVisible= false
+			}, /** after dialog animated */ 200);
+		},
+		// 设备
+		getEqList() {
+			this.$http({
+				url: this.$http.adornUrl('/monitoring/equipment/page'),
+				method: 'get'
+			}).then(({ data }) => {
+				if (data && data.code === 0) {
+					this.eqList = data.data.list
+				} else {
+					this.eqList = []
+				}
+			})
+		},
+		// 产线
+		getLineList() {
+			this.$http({
+				url: this.$http.adornUrl('/monitoring/productionLine/list'),
+				method: 'get'
+			}).then(({ data }) => {
+				if (data && data.code === 0) {
+					this.lineList = data.data
+				} else {
+					this.lineList = []
+				}
+			})
+		},
+		// 获取数据列表
+		getDataList() {
+			this.addOrUpdateVisible = false
+			this.dataListLoading = true
+			this.$http({
+				url: this.$http.adornUrl('/monitoring/equipmentValueMonitor/realTimePage'),
+				method: 'get',
+				params: this.$http.adornParams({
+					page: this.pageIndex,
+					limit: this.pageSize,
+					equipmentId: this.dataForm.equipmentId,
+					lineId: this.dataForm.lineId
+				})
+			}).then(({ data }) => {
+				if (data && data.code === 0) {
+					this.dataList = data.data.list
+					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
+		},
+		handleOperations({ type, data }) {
+			switch (type) {
+				case 'view-alarm':
+					const { equipmentId: id } = data
+					this.$router.push({
+						name: 'monitoring-equipmentHistoricalParameters',
+						params: { id }
+					})
+					break
+				// case 'edit':
+				// 	return this.addOrUpdateHandle(id)
+				// case 'delete':
+				// 	return this.deleteHandle(id)
+			}
+		},
+		// 新增 / 修改
+		addOrUpdateHandle(id) {
+			this.addOrUpdateVisible = true
+			this.$nextTick(() => {
+				this.$refs.addOrUpdate.init(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/equipmentGroup'),
+					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/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-add-or-update.vue

@@ -0,0 +1,184 @@
+<template>
+	<el-dialog :title="!dataForm.id ? i18n.t('add') : i18n.t('update')" :close-on-click-modal="false" :visible.sync="visible">
+		<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
+			<el-form-item label="设备ID" prop="equipmentId">
+				<el-input v-model="dataForm.equipmentId" placeholder="设备ID"></el-input>
+			</el-form-item>
+			<el-form-item label="文件ID" prop="fileId">
+				<el-input v-model="dataForm.fileId" placeholder="文件ID"></el-input>
+			</el-form-item>
+			<el-form-item :label="$t('desc')" prop="description">
+				<el-input v-model="dataForm.description" :placeholder="$t('desc')"></el-input>
+			</el-form-item>
+			<el-form-item label="启用状态:0 、停用，1、启用" prop="enabled">
+				<el-input v-model="dataForm.enabled" placeholder="启用状态:0 、停用，1、启用"></el-input>
+			</el-form-item>
+			<el-form-item label="备注" prop="remark">
+				<el-input v-model="dataForm.remark" placeholder="备注"></el-input>
+			</el-form-item>
+			<el-form-item label="删除标志，是否有效:1 可用 0不可用" prop="valid">
+				<el-input v-model="dataForm.valid" placeholder="删除标志，是否有效:1 可用 0不可用"></el-input>
+			</el-form-item>
+			<el-form-item :label="$t('creator')" prop="creatorId">
+				<el-input v-model="dataForm.creatorId" :placeholder="$t('creator')"></el-input>
+			</el-form-item>
+			<el-form-item :label="$t('creatorName')" prop="creatorName">
+				<el-input v-model="dataForm.creatorName" :placeholder="$t('creatorName')"></el-input>
+			</el-form-item>
+			<el-form-item label="创建时间" prop="createTime">
+				<el-input v-model="dataForm.createTime" placeholder="创建时间"></el-input>
+			</el-form-item>
+			<el-form-item :label="$t('updator')" prop="updaterId">
+				<el-input v-model="dataForm.updaterId" :placeholder="$t('updator')"></el-input>
+			</el-form-item>
+			<el-form-item :label="$t('updatorName')" prop="updaterName">
+				<el-input v-model="dataForm.updaterName" :placeholder="$t('updatorName')"></el-input>
+			</el-form-item>
+			<el-form-item :label="$t('updateTime')" prop="updateTime">
+				<el-input v-model="dataForm.updateTime" :placeholder="$t('updateTime')"></el-input>
+			</el-form-item>
+			<el-form-item :label="$t('version')" prop="version">
+				<el-input v-model="dataForm.version" :placeholder="$t('version')"></el-input>
+			</el-form-item>
+			<el-form-item label="文件类型编号" prop="typeCode">
+				<el-input v-model="dataForm.typeCode" placeholder="文件类型编号"></el-input>
+			</el-form-item>
+			<el-form-item label="文件名字" prop="fileName">
+				<el-input v-model="dataForm.fileName" placeholder="文件名字"></el-input>
+			</el-form-item>
+			<el-form-item label="下载地址" prop="fileUrl">
+				<el-input v-model="dataForm.fileUrl" placeholder="下载地址"></el-input>
+			</el-form-item>
+		</el-form>
+		<span slot="footer" class="dialog-footer">
+			<el-button @click="visible = false">{{ $t('cancel') }}</el-button>
+			<el-button type="primary" @click="dataFormSubmit()">{{ $t('confirm') }}</el-button>
+		</span>
+	</el-dialog>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			visible: false,
+			dataForm: {
+				id: 0,
+				equipmentId: '',
+				fileId: '',
+				description: '',
+				enabled: '',
+				remark: '',
+				valid: '',
+				creatorId: '',
+				creatorName: '',
+				createTime: '',
+				updaterId: '',
+				updaterName: '',
+				updateTime: '',
+				version: '',
+				typeCode: '',
+				fileName: '',
+				fileUrl: ''
+			},
+			dataRule: {
+				equipmentId: [{ required: true, message: '设备ID不能为空', trigger: 'blur' }],
+				fileId: [{ required: true, message: '文件ID不能为空', trigger: 'blur' }],
+				description: [{ required: true, message: '描述不能为空', trigger: 'blur' }],
+				enabled: [{ required: true, message: '启用状态:0 、停用，1、启用不能为空', trigger: 'blur' }],
+				remark: [{ required: true, message: '备注不能为空', trigger: 'blur' }],
+				valid: [{ required: true, message: '删除标志，是否有效:1 可用 0不可用不能为空', trigger: 'blur' }],
+				creatorId: [{ required: true, message: '创建人不能为空', trigger: 'blur' }],
+				creatorName: [{ required: true, message: '创建人姓名不能为空', trigger: 'blur' }],
+				createTime: [{ required: true, message: '创建时间不能为空', trigger: 'blur' }],
+				updaterId: [{ required: true, message: '更新人不能为空', trigger: 'blur' }],
+				updaterName: [{ required: true, message: '更新人姓名不能为空', trigger: 'blur' }],
+				updateTime: [{ required: true, message: '更新时间不能为空', trigger: 'blur' }],
+				version: [{ required: true, message: '版本号不能为空', trigger: 'blur' }],
+				typeCode: [{ required: true, message: '文件类型编号不能为空', trigger: 'blur' }],
+				fileName: [{ required: true, message: '文件名字不能为空', trigger: 'blur' }],
+				fileUrl: [{ required: true, message: '下载地址不能为空', trigger: 'blur' }]
+			}
+		}
+	},
+	methods: {
+		init(id) {
+			this.dataForm.id = id || 0
+			this.visible = true
+			this.$nextTick(() => {
+				this.$refs['dataForm'].resetFields()
+				if (this.dataForm.id) {
+					this.$http({
+						url: this.$http.adornUrl(`/monitoring/equipmentFile/${this.dataForm.id}`),
+						method: 'get',
+						params: this.$http.adornParams()
+					}).then(({ data }) => {
+						if (data && data.code === 0) {
+							this.dataForm.equipmentId = data.equipmenfile.equipmentId
+							this.dataForm.fileId = data.equipmenfile.fileId
+							this.dataForm.description = data.equipmenfile.description
+							this.dataForm.enabled = data.equipmenfile.enabled
+							this.dataForm.remark = data.equipmenfile.remark
+							this.dataForm.valid = data.equipmenfile.valid
+							this.dataForm.creatorId = data.equipmenfile.creatorId
+							this.dataForm.creatorName = data.equipmenfile.creatorName
+							this.dataForm.createTime = data.equipmenfile.createTime
+							this.dataForm.updaterId = data.equipmenfile.updaterId
+							this.dataForm.updaterName = data.equipmenfile.updaterName
+							this.dataForm.updateTime = data.equipmenfile.updateTime
+							this.dataForm.version = data.equipmenfile.version
+							this.dataForm.typeCode = data.equipmenfile.typeCode
+							this.dataForm.fileName = data.equipmenfile.fileName
+							this.dataForm.fileUrl = data.equipmenfile.fileUrl
+						}
+					})
+				}
+			})
+		},
+		// 表单提交
+		dataFormSubmit() {
+			this.$refs['dataForm'].validate(valid => {
+				if (valid) {
+					this.$http({
+						url: this.$http.adornUrl(`/monitoring/equipmentFile/${!this.dataForm.id ? '' : this.dataForm.id}`),
+						method: this.dataForm.id ? 'put' : 'post',
+						data: this.$http.adornData({
+							id: this.dataForm.id || undefined,
+							equipmentId: this.dataForm.equipmentId,
+							fileId: this.dataForm.fileId,
+							description: this.dataForm.description,
+							enabled: this.dataForm.enabled,
+							remark: this.dataForm.remark,
+							valid: this.dataForm.valid,
+							creatorId: this.dataForm.creatorId,
+							creatorName: this.dataForm.creatorName,
+							createTime: this.dataForm.createTime,
+							updaterId: this.dataForm.updaterId,
+							updaterName: this.dataForm.updaterName,
+							updateTime: this.dataForm.updateTime,
+							version: this.dataForm.version,
+							typeCode: this.dataForm.typeCode,
+							fileName: this.dataForm.fileName,
+							fileUrl: this.dataForm.fileUrl
+						})
+					}).then(({ data }) => {
+						if (data && data.code === 0) {
+							this.$message({
+								message: i18n.t('prompt.success'),
+								type: 'success',
+								duration: 1500,
+								onClose: () => {
+									this.visible = false
+									this.$emit('refreshDataList')
+								}
+							})
+						} else {
+							this.$message.error(data.msg)
+						}
+					})
+				}
+			})
+		}
+	}
+}
+</script>

src/views/modules/monitoring/equipmentFile.vue

@@ -0,0 +1,167 @@
+<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('parameter')" clearable></el-input>
+			</el-form-item>
+			<el-form-item>
+				<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>
+
+		<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" />
+		<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" @refreshDataList="getDataList"></add-or-update>
+	</div>
+</template>
+
+<script>
+import AddOrUpdate from './equipmentFile-add-or-update'
+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 { calcMaxHeight } from '@/utils'
+import { timeFilter } from '@/utils/filters'
+const tableConfigs = [
+	{ prop: 'id', name: '' },
+	{ prop: 'equipmentId', name: '设备ID' },
+	{ prop: 'fileId', name: '文件ID' },
+	{ prop: 'description', name: i18n.t('desc') },
+	{ prop: 'enabled', name: i18n.t('enabled') },
+	{ prop: 'remark', name: i18n.t('remark') },
+	{ prop: 'valid', name: i18n.t('delMark') },
+	{ prop: 'creatorId', name: i18n.t('creator') },
+	{ prop: 'creatorName', name: i18n.t('creatorName') },
+	{ prop: 'createTime', name: i18n.t('createTime'), filter: timeFilter },
+	{ prop: 'updaterId', name: i18n.t('updator') },
+	{ prop: 'updaterName', name: i18n.t('updatorName') },
+	{ prop: 'updateTime', name: i18n.t('updateTime'), filter: timeFilter },
+	{ prop: 'version', name: i18n.t('version') },
+	{ prop: 'typeCode', name: '文件类型编号' },
+	{ prop: 'fileName', name: '文件名字' },
+	{ prop: 'fileUrl', name: i18n.t('downloadurl') },
+	{ prop: 'operations', name: i18n.t('handle'), fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['edit', 'delete'] }
+]
+
+export default {
+	data() {
+		return {
+			tableConfigs,
+			calcMaxHeight,
+			dataForm: {
+				key: ''
+			},
+			dataList: [],
+			pageIndex: 1,
+			pageSize: 10,
+			totalPage: 0,
+			dataListLoading: false,
+			dataListSelections: [],
+			addOrUpdateVisible: false
+		}
+	},
+	components: {
+		AddOrUpdate,
+		BaseTable
+	},
+	activated() {
+		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/equipmentFile/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.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
+		},
+		// 新增 / 修改
+		addOrUpdateHandle(id) {
+			this.addOrUpdateVisible = true
+			this.$nextTick(() => {
+				this.$refs.addOrUpdate.init(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/equipmentFile'),
+					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/equipmentGroup.vue

@@ -0,0 +1,201 @@
+<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.groupname') + ' / ' + $t('eq.groupcode')" clearable></el-input>
+			</el-form-item>
+			<el-form-item>
+				<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
+			: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" @destory-dialog="handleDestroyDialog" />
+	</div>
+</template>
+
+<script>
+import { calcMaxHeight } from '@/utils'
+import { timeFilter } from '@/utils/filters'
+import AddOrUpdate from '@/components/base-dialog/addOrUpdate'
+// import AddOrUpdate from './equipmentGroup-add-or-update'
+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'
+
+const tableConfigs = [
+	{
+		type: 'index',
+		name: i18n.t('index')
+	},
+	{ prop: 'createTime', name: i18n.t('createTime'), filter: timeFilter },
+	{ prop: 'name', name: i18n.t('eq.groupname') },
+	{ prop: 'code', name: i18n.t('eq.groupcode') },
+	{ prop: 'remark', name: i18n.t('remark') },
+	{ prop: 'alarm', name: i18n.t('alarm.name'), buttonContent: i18n.t('alarm.view'), subcomponent: TableTextComponent, actionName: 'view-alarm' },
+	{ prop: 'operations', name: i18n.t('handle'), fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['edit', 'delete'] }
+]
+
+const addOrUpdateConfigs = {
+	type: 'dialog',
+	infoUrl: '/monitoring/equipmentGroup',
+	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 },
+		{ name: 'update', url: '/monitoring/equipmentGroup', permission: 'monitoring:equipmentgroup:update', showOnEdit: true }
+	]
+}
+
+export default {
+	data() {
+		return {
+			addOrUpdateConfigs,
+			calcMaxHeight,
+			tableConfigs,
+			dataForm: {
+				key: ''
+			},
+			dataList: [],
+			pageIndex: 1,
+			pageSize: 10,
+			totalPage: 0,
+			dataListLoading: false,
+			dataListSelections: [],
+			addOrUpdateVisible: false
+		}
+	},
+	components: {
+		AddOrUpdate,
+		BaseTable
+	},
+	activated() {
+		this.getDataList()
+	},
+	methods: {
+		// destroy dialog
+		handleDestroyDialog() {
+			setTimeout(() => {
+				this.addOrUpdateVisible = false
+			}, /** after dialog animated */ 200)
+		},
+		// 获取数据列表
+		getDataList() {
+			this.addOrUpdateVisible = false
+			this.dataListLoading = true
+			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 }) => {
+				if (data && data.code === 0) {
+					this.dataList = data.data.list
+					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
+		},
+		handleOperations({ type, data: id }) {
+			switch (type) {
+				case 'view-alarm':
+					const { name, code } = this.dataList.find(item => item.id === id)
+					this.$router.push({
+						name: 'monitoring-equipmentGroupAlarm',
+						params: {
+							groupName: name,
+							groupCode: code,
+							id
+						}
+					})
+					break
+				case 'edit':
+					return this.addOrUpdateHandle(id)
+				case 'delete':
+					return this.deleteHandle(id)
+			}
+		},
+		// 新增 / 修改
+		addOrUpdateHandle(id) {
+			this.addOrUpdateVisible = true
+			this.$nextTick(() => {
+				this.$refs.addOrUpdate.init(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/equipmentGroup'),
+					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/equipmentGroupAlarm.vue

@@ -0,0 +1,249 @@
+<template>
+	<div class="mod-config">
+		<el-form :inline="true" :model="dataForm">
+			<el-form-item :label="$t('eq.groupname')">
+				<strong>{{ $route.params.groupName || '--' }}</strong></el-form-item
+			>
+
+			<el-form-item :label="$t('eq.groupcode')">
+				<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-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
+			: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" @destory-dialog="handleDestroyDialog" />
+	</div>
+</template>
+
+<script>
+import { calcMaxHeight } from '@/utils'
+import { timeFilter, dictFilter } from '@/utils/filters'
+// import AddOrUpdate from './equipmentGroupAlarm-add-or-update'
+import AddOrUpdate from '@/components/base-dialog/addOrUpdate'
+import i18n from '@/i18n'
+import BaseTable from '@/components/base-table'
+import dictListMixin from '@/mixins/dictlist-module'
+import TableOperateComponent from '@/components/base-table/components/operationComponent'
+// import TableTextComponent from '@/components/base-table/components/detailComponent'
+
+// const alarmTypeDictId = '1557925215454814210'
+// const alarmLevelDictId = '1557925289517834242'
+const dictEntries = {
+	alarmType: { value: '1557925215454814210', field: 'typeDictValue' }, // field 和下面 addOrUpdateConfigs 里对应
+	alarmLevel: { value: '1557925289517834242', field: 'gradeDictValue' }
+}
+
+const tableConfigs = [
+	{
+		type: 'index',
+		name: i18n.t('index')
+	},
+	{ prop: 'createTime', name: i18n.t('createTime'), filter: timeFilter },
+	{ prop: 'code', name: i18n.t('alarm.code') },
+	{ 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'] }
+]
+
+const addOrUpdateConfigs = {
+	type: 'dialog',
+	infoUrl: '/monitoring/equipmentGroupAlarm',
+	fields: [
+		{ 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: '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 },
+		{ name: 'save', url: '/monitoring/equipmentGroupAlarm', extraFields: { equipmentGroupId: null }, permission: 'monitoring:equipmentgroupalarm:save', showOnEdit: false },
+		{ name: 'update', url: '/monitoring/equipmentGroupAlarm', extraFields: { equipmentGroupId: null }, permission: 'monitoring:equipmentgroupalarm:update', showOnEdit: true }
+	]
+}
+
+export default {
+	mixins: [dictListMixin],
+	data() {
+		return {
+			addOrUpdateConfigs,
+			calcMaxHeight,
+			tableConfigs,
+			dataForm: {
+				key: ''
+			},
+			dataList: [],
+			pageIndex: 1,
+			pageSize: 10,
+			totalPage: 0,
+			dataListLoading: false,
+			dataListSelections: [],
+			addOrUpdateVisible: false
+		}
+	},
+	components: {
+		AddOrUpdate,
+		BaseTable
+	},
+	activated() {
+		this.getDictData()
+		this.getDataList()
+	},
+	methods: {
+		// destroy dialog
+		handleDestroyDialog() {
+			setTimeout(() => {
+				this.addOrUpdateVisible= false
+			}, /** after dialog animated */ 200);
+		},
+		// 获取字典数据
+		getDictData() {
+			this.initDictList(Object.entries(dictEntries).map(([_, item]) => item.value))
+			this.addOrUpdateConfigs.fields.forEach(item => {
+				if (item.options && Array.isArray(item.options)) {
+					let id
+					Object.entries(dictEntries).forEach(([_, d]) => {
+						if (d.field === item.name) {
+							id = d.value
+						}
+					})
+					item.options = this.dictList[id]
+				}
+			})
+		},
+		// 获取数据列表
+		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(queryParams)
+			}).then(({ data }) => {
+				if (data && data.code === 0) {
+					this.dataList = data.data.list
+					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
+		},
+		handleOperations({ type, data: id }) {
+			switch (type) {
+				case 'edit':
+					return this.addOrUpdateHandle(id)
+				case 'delete':
+					return this.deleteHandle(id)
+			}
+		},
+		// 新增 / 修改
+		addOrUpdateHandle(id) {
+			this.addOrUpdateConfigs.operations.forEach(item => {
+				if (item.extraFields) {
+					item.extraFields.equipmentGroupId = this.$route.params.id || null
+				}
+			})
+			this.addOrUpdateVisible = true
+			this.$nextTick(() => {
+				this.$refs.addOrUpdate.init(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/equipmentGroupAlarm'),
+					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/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

@@ -0,0 +1,202 @@
+<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('name') + ' / ' + $t('code')" clearable></el-input>
+			</el-form-item>
+			<el-form-item>
+				<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>
+
+		<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"
+		>
+		</el-pagination>
+		<!-- 弹窗, 新增 / 修改 -->
+		<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 AddOrUpdate from './equipmentPlc-add-or-update'
+import AddOrUpdate from '@/components/base-dialog/addOrUpdate'
+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'
+
+const tableConfigs = [
+	{ type: 'index', width: 100, name: i18n.t('index') },
+	{ prop: 'code', name: i18n.t('code') },
+	{ prop: 'name', name: i18n.t('name') },
+	{ prop: 'enName', name: i18n.t('enname') },
+	{ prop: 'description', name: i18n.t('desc') },
+	{ prop: 'barcode', name: i18n.t('eq.plcbarcode') },
+	{ prop: 'collection', name: i18n.t('collectOrNot'), filter: val => ({ 0: i18n.t('notCollect'), 1: i18n.t('collect') }[val]) },
+	{ prop: 'ip', name: 'IP' },
+	{ prop: 'port', name: i18n.t('eq.port') },
+	{ prop: 'remark', name: i18n.t('remark') },
+	{ prop: 'operations', name: i18n.t('handle'), fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['edit', 'delete'] }
+]
+
+const addOrUpdateConfigs = {
+	type: 'dialog', // dialog | drawer | page
+	infoUrl: '/monitoring/equipmentPlc',
+	fields: [
+		{ name: 'name', required: true },
+		{ name: 'code', required: true },
+		{ name: 'enName', label: i18n.t('enname') },
+		{
+			name: 'collection',
+			label: i18n.t('collectOrNot'),
+			required: true,
+			type: 'select',
+			options: [
+				{ label: i18n.t('collect'), value: 1 },
+				{ label: i18n.t('notCollect'), value: 0 }
+			]
+		},
+		{ name: 'ip', label: 'IP', required: true, placeholder: '0.0.0.0' },
+		{ name: 'port', label: i18n.t('eq.port'), placeholder: '443' },
+		'description',
+		'remark',
+		{ name: 'barcode', label: i18n.t('eq.plcbarcode'), span: 24 }
+	],
+	operations: [
+		{ name: 'cancel', url: true, showAlways: true },
+		{ name: 'save', url: '/monitoring/equipmentPlc', permission: 'monitoring:equipmentplc:save', showOnEdit: false },
+		{ name: 'update', url: '/monitoring/equipmentPlc', permission: 'monitoring:equipmentplc:update', showOnEdit: true }
+	]
+}
+
+export default {
+	data() {
+		return {
+			tableConfigs,
+			calcMaxHeight,
+			addOrUpdateConfigs,
+			dataForm: {
+				key: ''
+			},
+			dataList: [],
+			pageIndex: 1,
+			pageSize: 10,
+			totalPage: 0,
+			dataListLoading: false,
+			dataListSelections: [],
+			addOrUpdateVisible: false
+		}
+	},
+	components: {
+		AddOrUpdate,
+		BaseTable
+	},
+	activated() {
+		this.getDataList()
+	},
+	methods: {
+		// destroy dialog
+		handleDestroyDialog() {
+			setTimeout(() => {
+				this.addOrUpdateVisible= false
+			}, /** after dialog animated */ 200);
+		},
+		//handleOperations
+		handleOperations({ type, data: id }) {
+			switch (type) {
+				case 'edit':
+					return this.addOrUpdateHandle(id)
+				case 'delete':
+					return this.deleteHandle(id)
+			}
+		},
+		// 获取数据列表
+		getDataList() {
+			this.dataListLoading = true
+			this.$http({
+				url: this.$http.adornUrl('/monitoring/equipmentPlc/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.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
+		},
+		// 新增 / 修改
+		addOrUpdateHandle(id) {
+			this.addOrUpdateVisible = true
+			this.$nextTick(() => {
+				this.$refs.addOrUpdate.init(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/equipmentPlc'),
+					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/equipmentPlcConnect.vue

@@ -0,0 +1,266 @@
+<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('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 :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" @destory-dialog="handleDestroyDialog" />
+	</div>
+</template>
+
+<script>
+import { calcMaxHeight } from '@/utils'
+// import { timeFilter } from '@/utils/filters'
+// import AddOrUpdate from './equipmentPlcConnect-add-or-update'
+import AddOrUpdate from '@/components/base-dialog/addOrUpdate'
+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 { dictFilter } from '@/utils/filters'
+// import axios from '@/utils/request.js'
+
+const tableConfigs = [
+	{ type: 'index', width: 100, name: i18n.t('index') },
+	{ prop: 'lineName', name: i18n.t('pl.title') },
+	{ prop: 'sectionName', name: i18n.t('ws.title') },
+	{ prop: 'equName', name: i18n.t('equipment') },
+	{ prop: 'equCode', name: i18n.t('eq.code') },
+	{ prop: 'plcCode', name: i18n.t('eq.plccode') },
+	{ prop: 'plcName', name: i18n.t('eq.plcname') },
+	{ prop: 'plcIp', name: 'PLC IP' },
+	{ prop: 'operations', name: i18n.t('handle'), fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['edit', 'delete'] }
+]
+
+const UnitDictTypeId = '1557173812109242370'
+const getUnitList = function() {
+	const dl = JSON.parse(localStorage.getItem('dictList'))[UnitDictTypeId] || []
+	return dl.map(item => ({ label: item.dictLabel, value: item.dictValue }))
+}
+const addOrUpdateConfigs = {
+	type: 'dialog',
+	infoUrl: '/monitoring/equipmentPlcConnect',
+	fields: [
+		{ name: 'equipmentId', label: i18n.t('equipment'), required: true, type: 'select', options: [] },
+		{ name: 'plcId', label: i18n.t('eq.plcname'), required: true, type: 'select', options: [] }
+	],
+	operations: [
+		{ name: 'cancel', url: true, showAlways: true },
+		{ name: 'save', url: '/monitoring/equipmentPlcConnect', permission: 'monitoring:equipmentplcconnect:save', showOnEdit: false },
+		{ name: 'update', url: '/monitoring/equipmentPlcConnect', permission: 'monitoring:equipmentplcconnect:update', showOnEdit: true }
+	],
+	subtable: {
+		title: i18n.t('params.plctitle'),
+		url: '/monitoring/equipmentPlcParam',
+		relatedField: 'plcConId',
+		tableConfigs: [
+			{ type: 'index', width: 100, name: i18n.t('index') },
+			{ prop: 'paramCode', name: i18n.t('params.code'), formField: true, rules: [{ required: true, message: i18n.t('required'), trigger: 'blur' }] },
+			{ prop: 'paramName', name: i18n.t('params.name'), formField: true, rules: [{ required: true, message: i18n.t('required'), trigger: 'blur' }] },
+			{ prop: 'paramAddress', name: i18n.t('paramUrl'), formField: true },
+			{ prop: 'unitDictValue', name: i18n.t('unit'), filter: dictFilter(UnitDictTypeId), formField: true, formType: 'select', formOptions: getUnitList() },
+			{ prop: 'minValue', name: i18n.t('min'), formField: true },
+			{ prop: 'maxValue', name: i18n.t('max'), formField: true },
+			{ prop: 'defaultValue', name: i18n.t('params.paramStdValue'), formField: true },
+			{ prop: 'description', name: i18n.t('desc'), formField: true },
+			{
+				prop: 'enabled',
+				name: i18n.t('enabled'),
+				filter: val => [i18n.t('disable'), i18n.t('enable')][+val],
+				// filter: val => ({0:i18n.t('disable'), 1:i18n.t('enable')}[+val]),
+				rules: [{ required: true, message: i18n.t('required'), trigger: 'blur' }],
+				formField: true,
+				formType: 'select',
+				formOptions: [
+					{ value: 0, label: i18n.t('disable') },
+					{ value: 1, label: i18n.t('enable') }
+				]
+			},
+			{ prop: 'remark', name: i18n.t('remark'), formField: true },
+			{
+				prop: 'collection',
+				name: i18n.t('collectOrNot'),
+				filter: val => [i18n.t('notCollect'), i18n.t('collect')][+val],
+				rules: [{ required: true, message: i18n.t('required'), trigger: 'blur' }],
+				formField: true,
+				formType: 'select',
+				formOptions: [
+					{ value: 0, label: i18n.t('notCollect') },
+					{ value: 1, label: i18n.t('collect') }
+				]
+			},
+			{ prop: 'operations', name: i18n.t('handle'), fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['edit', 'delete'] }
+		]
+	}
+}
+
+export default {
+	data() {
+		return {
+			addOrUpdateConfigs,
+			calcMaxHeight,
+			tableConfigs,
+			dataForm: {
+				key: ''
+			},
+			dataList: [],
+			pageIndex: 1,
+			pageSize: 10,
+			totalPage: 0,
+			dataListLoading: false,
+			dataListSelections: [],
+			addOrUpdateVisible: false
+		}
+	},
+	components: {
+		AddOrUpdate,
+		BaseTable
+	},
+	activated() {
+		this.getEqList()
+		this.getPlcList()
+		this.getDataList()
+	},
+	methods: {
+		// destroy dialog
+		handleDestroyDialog() {
+			setTimeout(() => {
+				this.addOrUpdateVisible= false
+			}, /** after dialog animated */ 200);
+		},
+		// 设备列表
+		getEqList() {
+			this.$http({
+				url: this.$http.adornUrl('/monitoring/equipment/page'),
+				method: 'get',
+				params: this.$http.adornParams({
+					// page: this.pageIndex,
+					// limit: this.pageSize,
+					// key: this.dataForm.key
+				})
+			}).then(({ data }) => {
+				const eqConfig = this.addOrUpdateConfigs.fields.find(item => item.name === 'equipmentId')
+				eqConfig.options = data.data?.list?.map(item => ({ value: item.id, label: item.name })) || []
+			})
+		},
+		// plc 列表
+		getPlcList() {
+			this.$http({
+				url: this.$http.adornUrl('/monitoring/equipmentPlc/page'),
+				method: 'get',
+				params: this.$http.adornParams({
+					// page: this.pageIndex,
+					// limit: this.pageSize,
+					// key: this.dataForm.key
+				})
+			}).then(({ data }) => {
+				const plcConfig = this.addOrUpdateConfigs.fields.find(item => item.name === 'plcId')
+				plcConfig.options = data.data?.list?.map(item => ({ value: item.id, label: item.name })) || []
+			})
+		},
+		handleOperations({ type, data: id }) {
+			switch (type) {
+				case 'edit':
+					return this.addOrUpdateHandle(id)
+				case 'delete':
+					return this.deleteHandle(id)
+			}
+		},
+		// 获取数据列表
+		getDataList() {
+			this.dataListLoading = true
+			this.$http({
+				url: this.$http.adornUrl('/monitoring/equipmentPlcConnect/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.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
+		},
+		// 新增 / 修改
+		addOrUpdateHandle(id) {
+			this.addOrUpdateVisible = true
+			this.$nextTick(() => {
+				this.$refs.addOrUpdate.init(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/equipmentPlcConnect'),
+					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/equipmentPlcParam-add-or-update.vue

@@ -0,0 +1,254 @@
+<template>
+	<el-dialog :title="!dataForm.id ? i18n.t('add') : i18n.t('update')" :close-on-click-modal="false" :visible.sync="visible">
+		<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
+			<el-form-item label="plc连接表ID" prop="plcConId">
+				<el-input v-model="dataForm.plcConId" placeholder="plc连接表ID"></el-input>
+			</el-form-item>
+			<el-form-item label="类型：status、data、constant" prop="type">
+				<el-input v-model="dataForm.type" placeholder="类型：status、data、constant"></el-input>
+			</el-form-item>
+			<el-form-item label="参数编码" prop="paramCode">
+				<el-input v-model="dataForm.paramCode" placeholder="参数编码"></el-input>
+			</el-form-item>
+			<el-form-item label="参数名称" prop="paramName">
+				<el-input v-model="dataForm.paramName" placeholder="参数名称"></el-input>
+			</el-form-item>
+			<el-form-item label="参数地址，对应实时数据库表的列名" prop="paramAddress">
+				<el-input v-model="dataForm.paramAddress" placeholder="参数地址，对应实时数据库表的列名"></el-input>
+			</el-form-item>
+			<el-form-item label="参数值类型：int、long、boolean、string、list 暂不使用" prop="valueType">
+				<el-input v-model="dataForm.valueType" placeholder="参数值类型：int、long、boolean、string、list 暂不使用"></el-input>
+			</el-form-item>
+			<el-form-item label="单位 关联数据字典表label_value" prop="unitDictValue">
+				<el-input v-model="dataForm.unitDictValue" placeholder="单位 关联数据字典表label_value"></el-input>
+			</el-form-item>
+			<el-form-item label="最小值" prop="minValue">
+				<el-input v-model="dataForm.minValue" placeholder="最小值"></el-input>
+			</el-form-item>
+			<el-form-item label="最大值" prop="maxValue">
+				<el-input v-model="dataForm.maxValue" placeholder="最大值"></el-input>
+			</el-form-item>
+			<el-form-item label="参数设定标准值" prop="defaultValue">
+				<el-input v-model="dataForm.defaultValue" placeholder="参数设定标准值"></el-input>
+			</el-form-item>
+			<el-form-item :label="$t('desc')" prop="description">
+				<el-input v-model="dataForm.description" :placeholder="$t('desc')"></el-input>
+			</el-form-item>
+			<el-form-item label="启用状态:0 、停用，1、启用" prop="enabled">
+				<el-input v-model="dataForm.enabled" placeholder="启用状态:0 、停用，1、启用"></el-input>
+			</el-form-item>
+			<el-form-item label="备注" prop="remark">
+				<el-input v-model="dataForm.remark" placeholder="备注"></el-input>
+			</el-form-item>
+			<el-form-item label="删除标志，是否有效:1 可用 0不可用" prop="valid">
+				<el-input v-model="dataForm.valid" placeholder="删除标志，是否有效:1 可用 0不可用"></el-input>
+			</el-form-item>
+			<el-form-item :label="$t('creator')" prop="creatorId">
+				<el-input v-model="dataForm.creatorId" :placeholder="$t('creator')"></el-input>
+			</el-form-item>
+			<el-form-item :label="$t('creatorName')" prop="creatorName">
+				<el-input v-model="dataForm.creatorName" :placeholder="$t('creatorName')"></el-input>
+			</el-form-item>
+			<el-form-item label="创建时间" prop="createTime">
+				<el-input v-model="dataForm.createTime" placeholder="创建时间"></el-input>
+			</el-form-item>
+			<el-form-item :label="$t('updator')" prop="updaterId">
+				<el-input v-model="dataForm.updaterId" :placeholder="$t('updator')"></el-input>
+			</el-form-item>
+			<el-form-item :label="$t('updatorName')" prop="updaterName">
+				<el-input v-model="dataForm.updaterName" :placeholder="$t('updatorName')"></el-input>
+			</el-form-item>
+			<el-form-item :label="$t('updateTime')" prop="updateTime">
+				<el-input v-model="dataForm.updateTime" :placeholder="$t('updateTime')"></el-input>
+			</el-form-item>
+			<el-form-item :label="$t('version')" prop="version">
+				<el-input v-model="dataForm.version" :placeholder="$t('version')"></el-input>
+			</el-form-item>
+			<el-form-item label="0 代表不采集, 1 代表采集" prop="collection">
+				<el-input v-model="dataForm.collection" placeholder="0 代表不采集, 1 代表采集"></el-input>
+			</el-form-item>
+			<el-form-item label="采集周期（s） 暂不使用" prop="collectionCycle">
+				<el-input v-model="dataForm.collectionCycle" placeholder="采集周期（s） 暂不使用"></el-input>
+			</el-form-item>
+			<el-form-item label="上报周期（s） 暂不使用" prop="reportingCycle">
+				<el-input v-model="dataForm.reportingCycle" placeholder="上报周期（s） 暂不使用"></el-input>
+			</el-form-item>
+			<el-form-item label="上报方式 暂不使用" prop="reportingMethod">
+				<el-input v-model="dataForm.reportingMethod" placeholder="上报方式 暂不使用"></el-input>
+			</el-form-item>
+			<el-form-item label="上报编码 暂不使用" prop="reportingCode">
+				<el-input v-model="dataForm.reportingCode" placeholder="上报编码 暂不使用"></el-input>
+			</el-form-item>
+		</el-form>
+		<span slot="footer" class="dialog-footer">
+			<el-button @click="visible = false">{{ $t('cancel') }}</el-button>
+			<el-button type="primary" @click="dataFormSubmit()">{{ $t('confirm') }}</el-button>
+		</span>
+	</el-dialog>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			visible: false,
+			dataForm: {
+				id: 0,
+				plcConId: '',
+				type: '',
+				paramCode: '',
+				paramName: '',
+				paramAddress: '',
+				valueType: '',
+				unitDictValue: '',
+				minValue: '',
+				maxValue: '',
+				defaultValue: '',
+				description: '',
+				enabled: '',
+				remark: '',
+				valid: '',
+				creatorId: '',
+				creatorName: '',
+				createTime: '',
+				updaterId: '',
+				updaterName: '',
+				updateTime: '',
+				version: '',
+				collection: '',
+				collectionCycle: '',
+				reportingCycle: '',
+				reportingMethod: '',
+				reportingCode: ''
+			},
+			dataRule: {
+				plcConId: [{ required: true, message: 'plc连接表ID不能为空', trigger: 'blur' }],
+				type: [{ required: true, message: '类型：status、data、constant不能为空', trigger: 'blur' }],
+				paramCode: [{ required: true, message: '参数编码不能为空', trigger: 'blur' }],
+				paramName: [{ required: true, message: '参数名称不能为空', trigger: 'blur' }],
+				paramAddress: [{ required: true, message: '参数地址，对应实时数据库表的列名不能为空', trigger: 'blur' }],
+				valueType: [{ required: true, message: '参数值类型：int、long、boolean、string、list 暂不使用不能为空', trigger: 'blur' }],
+				unitDictValue: [{ required: true, message: '单位 关联数据字典表label_value不能为空', trigger: 'blur' }],
+				minValue: [{ required: true, message: '最小值不能为空', trigger: 'blur' }],
+				maxValue: [{ required: true, message: '最大值不能为空', trigger: 'blur' }],
+				defaultValue: [{ required: true, message: '参数设定标准值不能为空', trigger: 'blur' }],
+				description: [{ required: true, message: '描述不能为空', trigger: 'blur' }],
+				enabled: [{ required: true, message: '启用状态:0 、停用，1、启用不能为空', trigger: 'blur' }],
+				remark: [{ required: true, message: '备注不能为空', trigger: 'blur' }],
+				valid: [{ required: true, message: '删除标志，是否有效:1 可用 0不可用不能为空', trigger: 'blur' }],
+				creatorId: [{ required: true, message: '创建人不能为空', trigger: 'blur' }],
+				creatorName: [{ required: true, message: '创建人姓名不能为空', trigger: 'blur' }],
+				createTime: [{ required: true, message: '创建时间不能为空', trigger: 'blur' }],
+				updaterId: [{ required: true, message: '更新人不能为空', trigger: 'blur' }],
+				updaterName: [{ required: true, message: '更新人姓名不能为空', trigger: 'blur' }],
+				updateTime: [{ required: true, message: '更新时间不能为空', trigger: 'blur' }],
+				version: [{ required: true, message: '版本号不能为空', trigger: 'blur' }],
+				collection: [{ required: true, message: '0 代表不采集, 1 代表采集不能为空', trigger: 'blur' }],
+				collectionCycle: [{ required: true, message: '采集周期（s） 暂不使用不能为空', trigger: 'blur' }],
+				reportingCycle: [{ required: true, message: '上报周期（s） 暂不使用不能为空', trigger: 'blur' }],
+				reportingMethod: [{ required: true, message: '上报方式 暂不使用不能为空', trigger: 'blur' }],
+				reportingCode: [{ required: true, message: '上报编码 暂不使用不能为空', trigger: 'blur' }]
+			}
+		}
+	},
+	methods: {
+		init(id) {
+			this.dataForm.id = id || 0
+			this.visible = true
+			this.$nextTick(() => {
+				this.$refs['dataForm'].resetFields()
+				if (this.dataForm.id) {
+					this.$http({
+						url: this.$http.adornUrl(`/monitoring/equipmentPlcParam/${this.dataForm.id}`),
+						method: 'get',
+						params: this.$http.adornParams()
+					}).then(({ data }) => {
+						if (data && data.code === 0) {
+							this.dataForm.plcConId = data.equipmenplcParam.plcConId
+							this.dataForm.type = data.equipmenplcParam.type
+							this.dataForm.paramCode = data.equipmenplcParam.paramCode
+							this.dataForm.paramName = data.equipmenplcParam.paramName
+							this.dataForm.paramAddress = data.equipmenplcParam.paramAddress
+							this.dataForm.valueType = data.equipmenplcParam.valueType
+							this.dataForm.unitDictValue = data.equipmenplcParam.unitDictValue
+							this.dataForm.minValue = data.equipmenplcParam.minValue
+							this.dataForm.maxValue = data.equipmenplcParam.maxValue
+							this.dataForm.defaultValue = data.equipmenplcParam.defaultValue
+							this.dataForm.description = data.equipmenplcParam.description
+							this.dataForm.enabled = data.equipmenplcParam.enabled
+							this.dataForm.remark = data.equipmenplcParam.remark
+							this.dataForm.valid = data.equipmenplcParam.valid
+							this.dataForm.creatorId = data.equipmenplcParam.creatorId
+							this.dataForm.creatorName = data.equipmenplcParam.creatorName
+							this.dataForm.createTime = data.equipmenplcParam.createTime
+							this.dataForm.updaterId = data.equipmenplcParam.updaterId
+							this.dataForm.updaterName = data.equipmenplcParam.updaterName
+							this.dataForm.updateTime = data.equipmenplcParam.updateTime
+							this.dataForm.version = data.equipmenplcParam.version
+							this.dataForm.collection = data.equipmenplcParam.collection
+							this.dataForm.collectionCycle = data.equipmenplcParam.collectionCycle
+							this.dataForm.reportingCycle = data.equipmenplcParam.reportingCycle
+							this.dataForm.reportingMethod = data.equipmenplcParam.reportingMethod
+							this.dataForm.reportingCode = data.equipmenplcParam.reportingCode
+						}
+					})
+				}
+			})
+		},
+		// 表单提交
+		dataFormSubmit() {
+			this.$refs['dataForm'].validate(valid => {
+				if (valid) {
+					this.$http({
+						url: this.$http.adornUrl(`/monitoring/equipmentPlcParam/${!this.dataForm.id ? '' : this.dataForm.id}`),
+						method: this.dataForm.id ? 'put' : 'post',
+						data: this.$http.adornData({
+							id: this.dataForm.id || undefined,
+							plcConId: this.dataForm.plcConId,
+							type: this.dataForm.type,
+							paramCode: this.dataForm.paramCode,
+							paramName: this.dataForm.paramName,
+							paramAddress: this.dataForm.paramAddress,
+							valueType: this.dataForm.valueType,
+							unitDictValue: this.dataForm.unitDictValue,
+							minValue: this.dataForm.minValue,
+							maxValue: this.dataForm.maxValue,
+							defaultValue: this.dataForm.defaultValue,
+							description: this.dataForm.description,
+							enabled: this.dataForm.enabled,
+							remark: this.dataForm.remark,
+							valid: this.dataForm.valid,
+							creatorId: this.dataForm.creatorId,
+							creatorName: this.dataForm.creatorName,
+							createTime: this.dataForm.createTime,
+							updaterId: this.dataForm.updaterId,
+							updaterName: this.dataForm.updaterName,
+							updateTime: this.dataForm.updateTime,
+							version: this.dataForm.version,
+							collection: this.dataForm.collection,
+							collectionCycle: this.dataForm.collectionCycle,
+							reportingCycle: this.dataForm.reportingCycle,
+							reportingMethod: this.dataForm.reportingMethod,
+							reportingCode: this.dataForm.reportingCode
+						})
+					}).then(({ data }) => {
+						if (data && data.code === 0) {
+							this.$message({
+								message: i18n.t('prompt.success'),
+								type: 'success',
+								duration: 1500,
+								onClose: () => {
+									this.visible = false
+									this.$emit('refreshDataList')
+								}
+							})
+						} else {
+							this.$message.error(data.msg)
+						}
+					})
+				}
+			})
+		}
+	}
+}
+</script>

src/views/modules/monitoring/equipmentPlcParam.vue

@@ -0,0 +1,166 @@
+<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('parameter')" clearable></el-input>
+			</el-form-item>
+			<el-form-item>
+				<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 :page="pageIndex" :size="pageSize" :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" />
+		<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" @refreshDataList="getDataList"></add-or-update>
+	</div>
+</template>
+
+<script>
+import { calcMaxHeight } from '@/utils'
+// import { timeFilter } from '@/utils/filters'
+import AddOrUpdate from './equipmentPlcParam-add-or-update'
+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 { dictFilter } from '@/utils/filters'
+
+const UnitDictTypeId = '1557173812109242370'
+
+const tableConfigs = [
+	{ type: 'index', width: 100, name: i18n.t('index') },
+	{ prop: 'plcConId', name: i18n.t('params.plcid') },
+	{ prop: 'paramCode', name: i18n.t('params.code') },
+	{ prop: 'paramName', name: i18n.t('params.name') },
+	{ prop: 'paramAddress', name: i18n.t('paramUrl') },
+	{ prop: 'unitDictValue', name: i18n.t('unit'), filter: dictFilter(UnitDictTypeId) },
+	{ prop: 'minValue', name: i18n.t('min') },
+	{ prop: 'maxValue', name: i18n.t('max') },
+	{ prop: 'defaultValue', name: i18n.t('params.paramStdValue') },
+	{ prop: 'description', name: i18n.t('desc') },
+	{ prop: 'enabled', name: i18n.t('enabled'), filter: val => [i18n.t('disable'), i18n.t('enable')][+val] },
+	{ prop: 'remark', name: i18n.t('remark') },
+	{ prop: 'collection', name: i18n.t('collectOrNot'), filter: val => [i18n.t('notCollect'), i18n.t('collect')][+val] }
+]
+
+export default {
+	data() {
+		return {
+			tableConfigs,
+			calcMaxHeight,
+			dataForm: {
+				key: ''
+			},
+			dataList: [],
+			pageIndex: 1,
+			pageSize: 10,
+			totalPage: 0,
+			dataListLoading: false,
+			dataListSelections: [],
+			addOrUpdateVisible: false
+		}
+	},
+	components: {
+		AddOrUpdate,
+		BaseTable
+	},
+	activated() {
+		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/equipmentPlcParam/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.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
+		},
+		// 新增 / 修改
+		addOrUpdateHandle(id) {
+			this.addOrUpdateVisible = true
+			this.$nextTick(() => {
+				this.$refs.addOrUpdate.init(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/equipmentPlcParam'),
+					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/equipmentQuantity-add-or-update.vue

@@ -0,0 +1,191 @@
+<template>
+	<el-dialog :title="!dataForm.id ? i18n.t('add') : i18n.t('update')" :close-on-click-modal="false" :visible.sync="visible">
+		<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
+			<el-form-item label="设备外部编码" prop="externalCode">
+				<el-input v-model="dataForm.externalCode" placeholder="设备外部编码"></el-input>
+			</el-form-item>
+			<el-form-item label="设备名称" prop="equipmentName">
+				<el-input v-model="dataForm.equipmentName" placeholder="设备名称"></el-input>
+			</el-form-item>
+			<el-form-item label="进入设备的数量" prop="inQuantity">
+				<el-input v-model="dataForm.inQuantity" placeholder="进入设备的数量"></el-input>
+			</el-form-item>
+			<el-form-item label="离开设备的数量，若plc只记录一个生产数量，也写入该字段" prop="outQuantity">
+				<el-input v-model="dataForm.outQuantity" placeholder="离开设备的数量，若plc只记录一个生产数量，也写入该字段"></el-input>
+			</el-form-item>
+			<el-form-item label="" prop="okQuantity">
+				<el-input v-model="dataForm.okQuantity" placeholder=""></el-input>
+			</el-form-item>
+			<el-form-item label="设备上报的报废数量" prop="nokQuantity">
+				<el-input v-model="dataForm.nokQuantity" placeholder="设备上报的报废数量"></el-input>
+			</el-form-item>
+			<el-form-item label="" prop="description">
+				<el-input v-model="dataForm.description" placeholder=""></el-input>
+			</el-form-item>
+			<el-form-item label="备注" prop="remark">
+				<el-input v-model="dataForm.remark" placeholder="备注"></el-input>
+			</el-form-item>
+			<el-form-item label="删除标志，是否有效:1 可用 0不可用" prop="valid">
+				<el-input v-model="dataForm.valid" placeholder="删除标志，是否有效:1 可用 0不可用"></el-input>
+			</el-form-item>
+			<el-form-item :label="$t('creator')" prop="creatorId">
+				<el-input v-model="dataForm.creatorId" :placeholder="$t('creator')"></el-input>
+			</el-form-item>
+			<el-form-item :label="$t('creatorName')" prop="creatorName">
+				<el-input v-model="dataForm.creatorName" :placeholder="$t('creatorName')"></el-input>
+			</el-form-item>
+			<el-form-item label="创建时间" prop="createTime">
+				<el-input v-model="dataForm.createTime" placeholder="创建时间"></el-input>
+			</el-form-item>
+			<el-form-item :label="$t('updator')" prop="updaterId">
+				<el-input v-model="dataForm.updaterId" :placeholder="$t('updator')"></el-input>
+			</el-form-item>
+			<el-form-item :label="$t('updatorName')" prop="updaterName">
+				<el-input v-model="dataForm.updaterName" :placeholder="$t('updatorName')"></el-input>
+			</el-form-item>
+			<el-form-item :label="$t('updateTime')" prop="updateTime">
+				<el-input v-model="dataForm.updateTime" :placeholder="$t('updateTime')"></el-input>
+			</el-form-item>
+			<el-form-item :label="$t('version')" prop="version">
+				<el-input v-model="dataForm.version" :placeholder="$t('version')"></el-input>
+			</el-form-item>
+			<el-form-item label="生产数量的记录时间" prop="recordTime">
+				<el-input v-model="dataForm.recordTime" placeholder="生产数量的记录时间"></el-input>
+			</el-form-item>
+		</el-form>
+		<span slot="footer" class="dialog-footer">
+			<el-button @click="visible = false">{{ $t('cancel') }}</el-button>
+			<el-button type="primary" @click="dataFormSubmit()">{{ $t('confirm') }}</el-button>
+		</span>
+	</el-dialog>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			visible: false,
+			dataForm: {
+				id: 0,
+				externalCode: '',
+				equipmentName: '',
+				inQuantity: '',
+				outQuantity: '',
+				okQuantity: '',
+				nokQuantity: '',
+				description: '',
+				remark: '',
+				valid: '',
+				creatorId: '',
+				creatorName: '',
+				createTime: '',
+				updaterId: '',
+				updaterName: '',
+				updateTime: '',
+				version: '',
+				recordTime: ''
+			},
+			dataRule: {
+				externalCode: [{ required: true, message: '设备外部编码不能为空', trigger: 'blur' }],
+				equipmentName: [{ required: true, message: '设备名称不能为空', trigger: 'blur' }],
+				inQuantity: [{ required: true, message: '进入设备的数量不能为空', trigger: 'blur' }],
+				outQuantity: [{ required: true, message: '离开设备的数量，若plc只记录一个生产数量，也写入该字段不能为空', trigger: 'blur' }],
+				okQuantity: [{ required: true, message: i18n.t('cannotempty'), trigger: 'blur' }],
+				nokQuantity: [{ required: true, message: '设备上报的报废数量不能为空', trigger: 'blur' }],
+				description: [{ required: true, message: i18n.t('cannotempty'), trigger: 'blur' }],
+				remark: [{ required: true, message: '备注不能为空', trigger: 'blur' }],
+				valid: [{ required: true, message: '删除标志，是否有效:1 可用 0不可用不能为空', trigger: 'blur' }],
+				creatorId: [{ required: true, message: '创建人不能为空', trigger: 'blur' }],
+				creatorName: [{ required: true, message: '创建人姓名不能为空', trigger: 'blur' }],
+				createTime: [{ required: true, message: '创建时间不能为空', trigger: 'blur' }],
+				updaterId: [{ required: true, message: '更新人不能为空', trigger: 'blur' }],
+				updaterName: [{ required: true, message: '更新人姓名不能为空', trigger: 'blur' }],
+				updateTime: [{ required: true, message: '更新时间不能为空', trigger: 'blur' }],
+				version: [{ required: true, message: '版本号不能为空', trigger: 'blur' }],
+				recordTime: [{ required: true, message: '生产数量的记录时间不能为空', trigger: 'blur' }]
+			}
+		}
+	},
+	methods: {
+		init(id) {
+			this.dataForm.id = id || 0
+			this.visible = true
+			this.$nextTick(() => {
+				this.$refs['dataForm'].resetFields()
+				if (this.dataForm.id) {
+					this.$http({
+						url: this.$http.adornUrl(`/monitoring/equipmentQuantity/${this.dataForm.id}`),
+						method: 'get',
+						params: this.$http.adornParams()
+					}).then(({ data }) => {
+						if (data && data.code === 0) {
+							this.dataForm.externalCode = data.equipmenquantity.externalCode
+							this.dataForm.equipmentName = data.equipmenquantity.equipmentName
+							this.dataForm.inQuantity = data.equipmenquantity.inQuantity
+							this.dataForm.outQuantity = data.equipmenquantity.outQuantity
+							this.dataForm.okQuantity = data.equipmenquantity.okQuantity
+							this.dataForm.nokQuantity = data.equipmenquantity.nokQuantity
+							this.dataForm.description = data.equipmenquantity.description
+							this.dataForm.remark = data.equipmenquantity.remark
+							this.dataForm.valid = data.equipmenquantity.valid
+							this.dataForm.creatorId = data.equipmenquantity.creatorId
+							this.dataForm.creatorName = data.equipmenquantity.creatorName
+							this.dataForm.createTime = data.equipmenquantity.createTime
+							this.dataForm.updaterId = data.equipmenquantity.updaterId
+							this.dataForm.updaterName = data.equipmenquantity.updaterName
+							this.dataForm.updateTime = data.equipmenquantity.updateTime
+							this.dataForm.version = data.equipmenquantity.version
+							this.dataForm.recordTime = data.equipmenquantity.recordTime
+						}
+					})
+				}
+			})
+		},
+		// 表单提交
+		dataFormSubmit() {
+			this.$refs['dataForm'].validate(valid => {
+				if (valid) {
+					this.$http({
+						url: this.$http.adornUrl(`/monitoring/equipmentQuantity/${!this.dataForm.id ? '' : this.dataForm.id}`),
+						method: this.dataForm.id ? 'put' : 'post',
+						data: this.$http.adornData({
+							id: this.dataForm.id || undefined,
+							externalCode: this.dataForm.externalCode,
+							equipmentName: this.dataForm.equipmentName,
+							inQuantity: this.dataForm.inQuantity,
+							outQuantity: this.dataForm.outQuantity,
+							okQuantity: this.dataForm.okQuantity,
+							nokQuantity: this.dataForm.nokQuantity,
+							description: this.dataForm.description,
+							remark: this.dataForm.remark,
+							valid: this.dataForm.valid,
+							creatorId: this.dataForm.creatorId,
+							creatorName: this.dataForm.creatorName,
+							createTime: this.dataForm.createTime,
+							updaterId: this.dataForm.updaterId,
+							updaterName: this.dataForm.updaterName,
+							updateTime: this.dataForm.updateTime,
+							version: this.dataForm.version,
+							recordTime: this.dataForm.recordTime
+						})
+					}).then(({ data }) => {
+						if (data && data.code === 0) {
+							this.$message({
+								message: i18n.t('prompt.success'),
+								type: 'success',
+								duration: 1500,
+								onClose: () => {
+									this.visible = false
+									this.$emit('refreshDataList')
+								}
+							})
+						} else {
+							this.$message.error(data.msg)
+						}
+					})
+				}
+			})
+		}
+	}
+}
+</script>

src/views/modules/monitoring/equipmentQuantity.vue

@@ -0,0 +1,172 @@
+<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('parameter')" clearable></el-input>
+			</el-form-item>
+			<el-form-item>
+				<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 :page="pageIndex" :size="pageSize" :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" />
+		<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" @refreshDataList="getDataList"></add-or-update>
+	</div>
+</template>
+
+<script>
+import { calcMaxHeight } from '@/utils'
+import { timeFilter } from '@/utils/filters'
+import AddOrUpdate from './equipmentQuantity-add-or-update'
+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'
+
+const tableConfigs = [
+	{ prop: 'id', name: 'id' },
+	{ prop: 'externalCode', name: '设备外部编码' },
+	{ prop: 'equipmentName', name: i18n.t('eq.name') },
+	{ prop: 'inQuantity', name: '进入设备的数量' },
+	{
+		prop: 'outQuantity',
+		name: '离开设备的数量，若plc只记录一个生产数量，也写入该字段'
+	},
+	{ prop: 'okQuantity', name: '' },
+	{ prop: 'nokQuantity', name: '设备上报的报废数量' },
+	{ prop: 'description', name: '' },
+	{ prop: 'remark', name: i18n.t('remark') },
+	{ prop: 'valid', name: i18n.t('delMark') },
+	{ prop: 'creatorId', name: i18n.t('creator') },
+	{ prop: 'creatorName', name: i18n.t('creatorName') },
+	{ prop: 'createTime', name: i18n.t('createTime'), filter: timeFilter },
+	{ prop: 'updaterId', name: i18n.t('updator') },
+	{ prop: 'updaterName', name: i18n.t('updatorName') },
+	{ prop: 'updateTime', name: i18n.t('updateTime'), filter: timeFilter },
+	{ prop: 'version', name: i18n.t('version') },
+	{ prop: 'recordTime', name: '生产数量的记录时间' },
+	{ prop: 'operations', name: i18n.t('handle'), fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['edit', 'delete'] }
+]
+
+export default {
+	data() {
+		return {
+			tableConfigs,
+			calcMaxHeight,
+			dataForm: {
+				key: ''
+			},
+			dataList: [],
+			pageIndex: 1,
+			pageSize: 10,
+			totalPage: 0,
+			dataListLoading: false,
+			dataListSelections: [],
+			addOrUpdateVisible: false
+		}
+	},
+	components: {
+		AddOrUpdate,
+		BaseTable
+	},
+	activated() {
+		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/equipmentQuantity/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.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
+		},
+		// 新增 / 修改
+		addOrUpdateHandle(id) {
+			this.addOrUpdateVisible = true
+			this.$nextTick(() => {
+				this.$refs.addOrUpdate.init(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/equipmentQuantity'),
+					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/equipmentStatusLog-add-or-update.vue

@@ -0,0 +1,184 @@
+<template>
+	<el-dialog :title="!dataForm.id ? i18n.t('add') : i18n.t('update')" :close-on-click-modal="false" :visible.sync="visible">
+		<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
+			<el-form-item label="设备外部代码" prop="externalCode">
+				<el-input v-model="dataForm.externalCode" placeholder="设备外部代码"></el-input>
+			</el-form-item>
+			<el-form-item label="plc id" prop="plcId">
+				<el-input v-model="dataForm.plcId" placeholder="plc id"></el-input>
+			</el-form-item>
+			<el-form-item label="plc" prop="plc">
+				<el-input v-model="dataForm.plc" placeholder="plc"></el-input>
+			</el-form-item>
+			<el-form-item label="设备id" prop="equipmentId">
+				<el-input v-model="dataForm.equipmentId" placeholder="设备id"></el-input>
+			</el-form-item>
+			<el-form-item label="设备名称" prop="equipmentName">
+				<el-input v-model="dataForm.equipmentName" placeholder="设备名称"></el-input>
+			</el-form-item>
+			<el-form-item label="状态，0正常 1计划停机 2故障" prop="status">
+				<el-input v-model="dataForm.status" placeholder="状态，0正常 1计划停机 2故障"></el-input>
+			</el-form-item>
+			<el-form-item label="记录时间" prop="logTime">
+				<el-input v-model="dataForm.logTime" placeholder="记录时间"></el-input>
+			</el-form-item>
+			<el-form-item label="备注" prop="remark">
+				<el-input v-model="dataForm.remark" placeholder="备注"></el-input>
+			</el-form-item>
+			<el-form-item label="删除标志，是否有效:1 可用 0不可用" prop="valid">
+				<el-input v-model="dataForm.valid" placeholder="删除标志，是否有效:1 可用 0不可用"></el-input>
+			</el-form-item>
+			<el-form-item :label="$t('creator')" prop="creatorId">
+				<el-input v-model="dataForm.creatorId" :placeholder="$t('creator')"></el-input>
+			</el-form-item>
+			<el-form-item :label="$t('creatorName')" prop="creatorName">
+				<el-input v-model="dataForm.creatorName" :placeholder="$t('creatorName')"></el-input>
+			</el-form-item>
+			<el-form-item label="创建时间" prop="createTime">
+				<el-input v-model="dataForm.createTime" placeholder="创建时间"></el-input>
+			</el-form-item>
+			<el-form-item :label="$t('updator')" prop="updaterId">
+				<el-input v-model="dataForm.updaterId" :placeholder="$t('updator')"></el-input>
+			</el-form-item>
+			<el-form-item :label="$t('updatorName')" prop="updaterName">
+				<el-input v-model="dataForm.updaterName" :placeholder="$t('updatorName')"></el-input>
+			</el-form-item>
+			<el-form-item :label="$t('updateTime')" prop="updateTime">
+				<el-input v-model="dataForm.updateTime" :placeholder="$t('updateTime')"></el-input>
+			</el-form-item>
+			<el-form-item :label="$t('version')" prop="version">
+				<el-input v-model="dataForm.version" :placeholder="$t('version')"></el-input>
+			</el-form-item>
+		</el-form>
+		<span slot="footer" class="dialog-footer">
+			<el-button @click="visible = false">{{ $t('cancel') }}</el-button>
+			<el-button type="primary" @click="dataFormSubmit()">{{ $t('confirm') }}</el-button>
+		</span>
+	</el-dialog>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			visible: false,
+			dataForm: {
+				id: 0,
+				externalCode: '',
+				plcId: '',
+				plc: '',
+				equipmentId: '',
+				equipmentName: '',
+				status: '',
+				logTime: '',
+				remark: '',
+				valid: '',
+				creatorId: '',
+				creatorName: '',
+				createTime: '',
+				updaterId: '',
+				updaterName: '',
+				updateTime: '',
+				version: ''
+			},
+			dataRule: {
+				externalCode: [{ required: true, message: '设备外部代码不能为空', trigger: 'blur' }],
+				plcId: [{ required: true, message: 'plc id不能为空', trigger: 'blur' }],
+				plc: [{ required: true, message: 'plc不能为空', trigger: 'blur' }],
+				equipmentId: [{ required: true, message: '设备id不能为空', trigger: 'blur' }],
+				equipmentName: [{ required: true, message: '设备名称不能为空', trigger: 'blur' }],
+				status: [{ required: true, message: '状态，0正常 1计划停机 2故障不能为空', trigger: 'blur' }],
+				logTime: [{ required: true, message: '记录时间不能为空', trigger: 'blur' }],
+				remark: [{ required: true, message: '备注不能为空', trigger: 'blur' }],
+				valid: [{ required: true, message: '删除标志，是否有效:1 可用 0不可用不能为空', trigger: 'blur' }],
+				creatorId: [{ required: true, message: '创建人不能为空', trigger: 'blur' }],
+				creatorName: [{ required: true, message: '创建人姓名不能为空', trigger: 'blur' }],
+				createTime: [{ required: true, message: '创建时间不能为空', trigger: 'blur' }],
+				updaterId: [{ required: true, message: '更新人不能为空', trigger: 'blur' }],
+				updaterName: [{ required: true, message: '更新人姓名不能为空', trigger: 'blur' }],
+				updateTime: [{ required: true, message: '更新时间不能为空', trigger: 'blur' }],
+				version: [{ required: true, message: '版本号不能为空', trigger: 'blur' }]
+			}
+		}
+	},
+	methods: {
+		init(id) {
+			this.dataForm.id = id || 0
+			this.visible = true
+			this.$nextTick(() => {
+				this.$refs['dataForm'].resetFields()
+				if (this.dataForm.id) {
+					this.$http({
+						url: this.$http.adornUrl(`/monitoring/equipmentStatusLog/${this.dataForm.id}`),
+						method: 'get',
+						params: this.$http.adornParams()
+					}).then(({ data }) => {
+						if (data && data.code === 0) {
+							this.dataForm.externalCode = data.equipmenstatusLog.externalCode
+							this.dataForm.plcId = data.equipmenstatusLog.plcId
+							this.dataForm.plc = data.equipmenstatusLog.plc
+							this.dataForm.equipmentId = data.equipmenstatusLog.equipmentId
+							this.dataForm.equipmentName = data.equipmenstatusLog.equipmentName
+							this.dataForm.status = data.equipmenstatusLog.status
+							this.dataForm.logTime = data.equipmenstatusLog.logTime
+							this.dataForm.remark = data.equipmenstatusLog.remark
+							this.dataForm.valid = data.equipmenstatusLog.valid
+							this.dataForm.creatorId = data.equipmenstatusLog.creatorId
+							this.dataForm.creatorName = data.equipmenstatusLog.creatorName
+							this.dataForm.createTime = data.equipmenstatusLog.createTime
+							this.dataForm.updaterId = data.equipmenstatusLog.updaterId
+							this.dataForm.updaterName = data.equipmenstatusLog.updaterName
+							this.dataForm.updateTime = data.equipmenstatusLog.updateTime
+							this.dataForm.version = data.equipmenstatusLog.version
+						}
+					})
+				}
+			})
+		},
+		// 表单提交
+		dataFormSubmit() {
+			this.$refs['dataForm'].validate(valid => {
+				if (valid) {
+					this.$http({
+						url: this.$http.adornUrl(`/monitoring/equipmentStatusLog/${!this.dataForm.id ? '' : this.dataForm.id}`),
+						method: this.dataForm.id ? 'put' : 'post',
+						data: this.$http.adornData({
+							id: this.dataForm.id || undefined,
+							externalCode: this.dataForm.externalCode,
+							plcId: this.dataForm.plcId,
+							plc: this.dataForm.plc,
+							equipmentId: this.dataForm.equipmentId,
+							equipmentName: this.dataForm.equipmentName,
+							status: this.dataForm.status,
+							logTime: this.dataForm.logTime,
+							remark: this.dataForm.remark,
+							valid: this.dataForm.valid,
+							creatorId: this.dataForm.creatorId,
+							creatorName: this.dataForm.creatorName,
+							createTime: this.dataForm.createTime,
+							updaterId: this.dataForm.updaterId,
+							updaterName: this.dataForm.updaterName,
+							updateTime: this.dataForm.updateTime,
+							version: this.dataForm.version
+						})
+					}).then(({ data }) => {
+						if (data && data.code === 0) {
+							this.$message({
+								message: i18n.t('prompt.success'),
+								type: 'success',
+								duration: 1500,
+								onClose: () => {
+									this.visible = false
+									this.$emit('refreshDataList')
+								}
+							})
+						} else {
+							this.$message.error(data.msg)
+						}
+					})
+				}
+			})
+		}
+	}
+}
+</script>

src/views/modules/monitoring/equipmentStatusLog.vue

@@ -0,0 +1,168 @@
+<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('parameter')" clearable></el-input>
+			</el-form-item>
+			<el-form-item>
+				<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 :page="pageIndex" :size="pageSize" :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" />
+		<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" @refreshDataList="getDataList"></add-or-update>
+	</div>
+</template>
+
+<script>
+import { calcMaxHeight } from '@/utils'
+import { timeFilter } from '@/utils/filters'
+import AddOrUpdate from './equipmentStatusLog-add-or-update'
+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'
+
+const tableConfigs = [
+	{ prop: 'id', name: 'id' },
+	{ prop: 'externalCode', name: '设备外部代码' },
+	{ prop: 'plcId', name: 'plc id' },
+	{ prop: 'plc', name: 'plc' },
+	{ prop: 'equipmentId', name: '设备id' },
+	{ prop: 'equipmentName', name: i18n.t('eq.name') },
+	{ prop: 'status', name: '状态，0正常 1计划停机 2故障' },
+	{ prop: 'logTime', name: i18n.t('recordTime') },
+	{ prop: 'remark', name: i18n.t('remark') },
+	{ prop: 'valid', name: i18n.t('delMark') },
+	{ prop: 'creatorId', name: i18n.t('creator') },
+	{ prop: 'creatorName', name: i18n.t('creatorName') },
+	{ prop: 'createTime', name: i18n.t('createTime'), filter: timeFilter },
+	{ prop: 'updaterId', name: i18n.t('updator') },
+	{ prop: 'updaterName', name: i18n.t('updatorName') },
+	{ prop: 'updateTime', name: i18n.t('updateTime'), filter: timeFilter },
+	{ prop: 'version', name: i18n.t('version') },
+	{ prop: 'operations', name: i18n.t('handle'), fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['edit', 'delete'] }
+]
+
+export default {
+	data() {
+		return {
+			tableConfigs,
+			calcMaxHeight,
+			dataForm: {
+				key: ''
+			},
+			dataList: [],
+			pageIndex: 1,
+			pageSize: 10,
+			totalPage: 0,
+			dataListLoading: false,
+			dataListSelections: [],
+			addOrUpdateVisible: false
+		}
+	},
+	components: {
+		AddOrUpdate,
+		BaseTable
+	},
+	activated() {
+		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/equipmentStatusLog/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.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
+		},
+		// 新增 / 修改
+		addOrUpdateHandle(id) {
+			this.addOrUpdateVisible = true
+			this.$nextTick(() => {
+				this.$refs.addOrUpdate.init(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/equipmentStatusLog'),
+					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>