mt-fe-group/mt-yd-ui
12
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

Merge pull request 'lb' (#1) from lb into develop

Browse Source 
Reviewed-on: #1
This commit is contained in:
高天泽 2022-09-20 14:53:16 +08:00
commit a0fef0454d
118 changed files with 16480 additions and 2594 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
.prettierrc Normal file
View File

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

166
AddOrUpdateConfig.md Normal file
View File

@ -0,0 +1,166 @@
# Add Or Update Dialog Configs
> 通过传入合理的配置项来使用 addOrUpdate Dialog
## 示例
```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 传给组件的配置

7
TODO.md Normal file
View File

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

55
package-lock.json generated
View File

@ -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=="
}
}
}
}
}

9
package.json
View File

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

25
public/i18n.js Normal file
View File

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

9
public/index.html
View File

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

46
src/App.vue
View File

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

2
src/assets/scss/variables.scss
View File

@ -5,7 +5,7 @@ $base--line-height: 1.15;
$navbar--height: 50px;
// Sidebar
$sidebar--width: 230px;
$sidebar--width: 300px;
$sidebar--width-fold: 64px;
$sidebar--background-color-dark: #263238;
$sidebar--text-color-dark: #8a979e;

548
src/components/base-detail-page/index.vue Normal file
View File

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

288
src/components/base-dialog/AttrForm/index.vue Normal file
View File

@ -0,0 +1,288 @@
<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"
: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: {
/** filter tableConfigs */
filterTableConfigs() {
// return this.tableConfigs.map(item => {
// const {prop, name, filter} = item
// const newConfigs = {prop,name,filter}
// if (item.type) newConfigs.type = item.type
// if (item.fixed) newConfigs.fixed = item.fixed
// if (item.width) newConfigs.width = item.width
// if (item.subcomponent) newConfigs.subcomponent = item.subcomponent
// if (item.options) newConfigs.options = item.options
// return newConfigs
// })
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>

562
src/components/base-dialog/addOrUpdate/index.vue Normal file
View File

@ -0,0 +1,562 @@
<template>
<el-dialog class="super-flexible-dialog" :title="isDetail ? title.detail : !dataForm.id ? title.add : title.edit" :visible.sync="visible" @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
: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" :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"
/>
<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 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: {
/**
* 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)
}
},
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)
if (item.required) {
const requiredRule = {
required: true,
message: i18n.t('validate.required'),
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])) {
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) {
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('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]
}
})
}
}
})
} 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) {},
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.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>

11
src/components/base-table/components/cell-container.vue Normal file
View File

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

30
src/components/base-table/components/detailComponent.js Normal file
View File

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

62
src/components/base-table/components/operationComponent.js Normal file
View File

@ -0,0 +1,62 @@
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'
// 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'),
// 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)
}
}

40
src/components/base-table/components/table-head.vue Normal file
View File

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

97
src/components/base-table/index.vue Normal file
View File

@ -0,0 +1,97 @@
<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"
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
}
},
filters: {
commonFilter: (source, filterType = a => a) => {
return filterType(source)
}
},
data() {
return {}
},
methods: {
handleSubEmitData(payload) {
this.$emit('operate-event', payload)
}
},
components: { TableHead }
}
</script>

213
src/components/base-upload/index.vue Normal file
View File

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

2
src/components/ren-dept-tree/src/ren-dept-tree.vue
View File

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

2
src/components/ren-region-tree/src/ren-region-tree.vue
View File

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

67
src/components/small-title/index.vue Normal file
View File

@ -0,0 +1,67 @@
<!--
* @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;
&::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>

557
src/i18n/en.js Normal file
View File

@ -0,0 +1,557 @@
const t = {}
t.loading = 'Loading...'
t.createTime = 'Create Time'
t.brand = {}
t.brand.lg = 'Monitoring System'
t.brand.mini = 'PMS'
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['厂务'] = '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['质量检测基础数据'] = 'Quality Inspection Basic Data'
t.routes['当前检测数据'] = 'Current Inspection 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['工厂'] = '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['质量检测类型'] = 'Quality Inpection Types'
t.routes['质量检测信息'] = 'Quality Inpection 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.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.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 = 'Dynamic 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.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.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 types per 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 = '是否运行'
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.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 = 'Please select an equipment to bind.'
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.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.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.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.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

31
src/i18n/index.js
View File

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

338
src/i18n/zh-CN.js
View File

@ -1,30 +1,326 @@
const t = {}
t.loading = '加载中...'
t.createTime = '添加时间'
t.brand = {}
t.brand.lg = '人人权限系统'
t.brand.mini = '人人'
t.brand.lg = '生产监控系统'
t.brand.mini = '监控'
t.add = '新增'
t.delete = '删除'
t.deleteBatch = '删除'
t.update = '修改'
t.query = '查询'
t.export = '导出'
t.handle = '操作'
t.confirm = '确定'
t.cancel = '取消'
t.clear = '清除'
t.logout = '退出'
t.manage = '处理'
t.createDate = '创建时间'
t.keyword = '关键字：'
t.choose = '请选择'
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['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.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.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.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.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.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.ws = {}
t.ws.title = '工段'
t.ws.id = '工段ID'
t.ws.name = '工段名称'
t.ws.code = '工段编码'
t.ws.binded = '已绑定的设备'
t.ws.unbind = '选择一个设备进行绑定'
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.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 = '请选择删除项'
@ -34,6 +330,7 @@ t.validate.required = '必填项不能为空'
t.validate.format = '{attr}格式错误'
t.upload = {}
t.upload.title = '上传资料'
t.upload.text = '将文件拖到此处，或<em>点击上传</em>'
t.upload.tip = '只支持{format}格式文件！'
t.upload.button = '点击上传'
@ -72,7 +369,7 @@ t.login.username = '用户名'
t.login.password = '密码'
t.login.captcha = '验证码'
t.login.demo = '在线演示'
t.login.copyright = '人人开源'
t.login.copyright = '版权所有：中建材智能自动化研究院有限公司 版本: 1.0'
t.schedule = {}
t.schedule.beanName = 'bean名称'
@ -224,8 +521,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 = {}

4
src/main.js
View File

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

24
src/mixins/dictlist-module.js Normal file
View File

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

34
src/mixins/view-module.js
View File

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

62
src/router/index.js
View File

@ -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: '已经登录过了', type: 'error' })
next(false)
} else {
next()
}
}
}
]
// 模块路由(基于主入口布局页面)
@ -36,7 +51,7 @@ export const moduleRoutes = {
]
}
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 +92,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 }) => {
if (res.code !== 0) {
Vue.prototype.$message.error(res.msg)
return next({ name: 'login' })
}
http.get(http.adornUrl('/sys/menu/nav')).then(({ data: res }) => {
/** axios 的拦截器已经拦截出错情况，此处只考虑正确情况即可 */
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(() => {
next({ name: 'login' })
}).catch((err) => {
// Vue.prototype.$message.error(err)
})
})
@ -103,7 +124,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 +142,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 +160,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 +181,11 @@ function fnAddDynamicMenuRoutes (menuList = [], routes = []) {
}
routes.push(route)
}
if (temp.length >= 1) {
return fnAddDynamicMenuRoutes(temp, routes)
}
// 添加路由
router.addRoutes([
{

12
src/utils/filters.js Normal file
View File

@ -0,0 +1,12 @@
/** 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')
}

33
src/utils/index.js
View File

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

49
src/utils/request.js
View File

@ -4,9 +4,12 @@ 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: process.env.NODE_ENV === 'production' ? '/api' : '/yd-monitor',
timeout: 1000 * 180,
withCredentials: true
})
@ -55,10 +58,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

176
src/views/main-content.vue
View File

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

174
src/views/main-navbar-update-password.vue
View File

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

269
src/views/main-navbar.vue
View File

@ -1,103 +1,184 @@
<template>
<nav class="aui-navbar" :class="`aui-navbar--${$store.state.navbarLayoutType}`">
<div class="aui-navbar__header">
<h1 class="aui-navbar__brand" @click="$router.push({ name: 'home' })">
<a class="aui-navbar__brand-lg" href="javascript:;">{{ $t('brand.lg') }}</a>
<a class="aui-navbar__brand-mini" href="javascript:;">{{ $t('brand.mini') }}</a>
</h1>
</div>
<div class="aui-navbar__body">
<el-menu class="aui-navbar__menu mr-auto" mode="horizontal">
<el-menu-item index="1" @click="$store.state.sidebarFold = !$store.state.sidebarFold">
<svg class="icon-svg aui-navbar__icon-menu aui-navbar__icon-menu--switch" aria-hidden="true"><use xlink:href="#icon-outdent"></use></svg>
</el-menu-item>
<el-menu-item index="2" @click="refresh()">
<svg class="icon-svg aui-navbar__icon-menu aui-navbar__icon-menu--refresh" aria-hidden="true"><use xlink:href="#icon-sync"></use></svg>
</el-menu-item>
</el-menu>
<el-menu class="aui-navbar__menu" mode="horizontal">
<el-menu-item index="2">
<a href="https://www.renren.io/" target="_blank">
<svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true"><use xlink:href="#icon-earth"></use></svg>
</a>
</el-menu-item>
<el-menu-item index="2">
<a href="https://gitee.com/renrenio/renren-security" target="_blank">
<svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true"><use xlink:href="#gitee"></use></svg>
</a>
</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>
<nav
class="aui-navbar"
:class="`aui-navbar--${$store.state.navbarLayoutType}`"
>
<div class="aui-navbar__header">
<h1 class="aui-navbar__brand" @click="$router.push({ name: 'home' })">
<a class="aui-navbar__brand-lg" href="javascript:;">{{
$t('brand.lg')
}}</a>
<a class="aui-navbar__brand-mini" href="javascript:;">{{
$t('brand.mini')
}}</a>
</h1>
</div>
<div class="aui-navbar__body">
<el-menu class="aui-navbar__menu mr-auto" mode="horizontal">
<el-menu-item
index="1"
@click="$store.state.sidebarFold = !$store.state.sidebarFold"
>
<svg
class="icon-svg aui-navbar__icon-menu aui-navbar__icon-menu--switch"
aria-hidden="true"
>
<use xlink:href="#icon-outdent"></use>
</svg>
</el-menu-item>
<el-menu-item index="2" @click="refresh()">
<svg
class="icon-svg aui-navbar__icon-menu aui-navbar__icon-menu--refresh"
aria-hidden="true"
>
<use xlink:href="#icon-sync"></use>
</svg>
</el-menu-item>
</el-menu>
<el-menu class="aui-navbar__menu" mode="horizontal">
<!-- <el-menu-item index="2">
<a href="https://www.renren.io/" target="_blank">
<svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true"><use xlink:href="#icon-earth"></use></svg>
</a>
</el-menu-item>
<el-menu-item index="2">
<a href="https://gitee.com/renrenio/renren-security" target="_blank">
<svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true"><use xlink:href="#gitee"></use></svg>
</a>
</el-menu-item> -->
<el-menu-item index="3">
<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 Cookies from 'js-cookie'
import screenfull from 'screenfull'
import UpdatePassword from './main-navbar-update-password'
import { clearLoginInfo } from '@/utils'
export default {
inject: ['refresh'],
data () {
return {
updatePasswordVisible: false,
messageTip: false
}
},
components: {
UpdatePassword
},
methods: {
// 全屏
fullscreenHandle () {
if (!screenfull.enabled) {
return this.$message({
message: this.$t('fullscreen.prompt'),
type: 'warning',
duration: 500
})
}
screenfull.toggle()
},
// 修改密码
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('/logout').then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
clearLoginInfo()
this.$router.push({ name: 'login' })
}).catch(() => {})
}).catch(() => {})
}
}
inject: ['refresh'],
data() {
return {
updatePasswordVisible: false,
messageTip: false
}
},
components: {
UpdatePassword
},
methods: {
// 获取当前语言环境
getLang() {
return Cookies.get('language')
},
// 切换语言环境
handleCommand(command) {
// 切换语言选项时，可能需要手动刷新页面
switch (command) {
case 'toCN':
this.$root.$i18n.locale = 'zh-CN'
window.navigator.language = 'zh-cn'
break
case 'toEN':
console.log('root', this.$root.$i18n.locale)
this.$root.$i18n.locale = 'en'
location.reload()
window.navigator.language = 'en-US'
break
}
},
// 全屏
fullscreenHandle() {
if (!screenfull.enabled) {
return this.$message({
message: this.$t('fullscreen.prompt'),
type: 'warning',
duration: 500
})
}
screenfull.toggle()
},
// 修改密码
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>

60
src/views/main-sidebar-sub-menu.vue
View File

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

72
src/views/main-sidebar.vue
View File

@ -1,30 +1,58 @@
<template>
<aside :class="['aui-sidebar', `aui-sidebar--${$store.state.sidebarLayoutSkin}`]">
<div class="aui-sidebar__inner">
<el-menu
:default-active="$store.state.sidebarMenuActiveName"
:collapse="$store.state.sidebarFold"
:unique-opened="true"
:collapseTransition="false"
class="aui-sidebar__menu">
<sub-menu v-for="menu in $store.state.sidebarMenuList" :key="menu.id" :menu="menu" />
</el-menu>
</div>
</aside>
<aside :class="['aui-sidebar', `aui-sidebar--${$store.state.sidebarLayoutSkin}`]">
<div class="aui-sidebar__inner">
<el-menu
:default-active="$store.state.sidebarMenuActiveName"
:collapse="$store.state.sidebarFold"
:unique-opened="true"
:collapseTransition="false"
class="aui-sidebar__menu"
>
<sub-menu v-for="menu in unhiddenMenuList" :key="menu.id" :menu="menu" />
</el-menu>
</div>
</aside>
</template>
<script>
import SubMenu from './main-sidebar-sub-menu'
export default {
data () {
return {
}
},
components: {
SubMenu
},
created () {
this.$store.state.sidebarMenuList = window.SITE_CONFIG['menuList']
}
data() {
return {
unhiddenMenuList: []
}
},
components: {
SubMenu
},
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>

188
src/views/main.vue
View File

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

49
src/views/modules/home.vue
View File

@ -1,31 +1,32 @@
<template>
<el-card shadow="never" class="aui-card--fill">
<div class="mod-home">
<h3>项目介绍</h3>
<ul>
<li>renren-ui基于vue、element-ui构建开发，实现<a href="https://gitee.com/renrenio/renren-ui" target="_blank">renren-security</a>后台管理前端功能，提供一套更优的前端解决方案</li>
<li>前后端分离，通过token进行数据交互，可独立部署</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>
</ul>
<h3>获取帮助</h3>
<ul>
<li>官方社区：<a href="https://www.renren.io/community" target="_blank">https://www.renren.io/community</a></li>
<li>前端Git地址：<a href="https://gitee.com/renrenio/renren-ui" target="_blank">https://gitee.com/renrenio/renren-ui</a></li>
<li>后台Git地址：<a href="https://gitee.com/renrenio/renren-security" target="_blank">https://gitee.com/renrenio/renren-security</a></li>
<li>如需关注项目最新动态，请Watch、Star项目，同时也是对项目最好的支持</li>
</ul>
<h3>官方微信群</h3>
<ul>
<li>扫码下面的二维码，关注【人人开源】公众号，回复【加群】，即可根据提示加入微信群！</li>
<li><img src="https://cdn.renren.io/f5cef202207132229319338.jpg" alt="微信群" /></li>
</ul>
</div>
</el-card>
<el-card shadow="never" class="aui-card--fill">
<div class="mod-home">
<h3>项目介绍</h3>
<ul>
<li>
renren-ui基于vue、element-ui构建开发，实现<a href="https://gitee.com/renrenio/renren-ui" target="_blank">renren-security</a>后台管理前端功能，提供一套更优的前端解决方案
</li>
<li>前后端分离，通过token进行数据交互，可独立部署</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>
</ul>
<h3>获取帮助</h3>
<ul>
<li>官方社区：<a href="https://www.renren.io/community" target="_blank">https://www.renren.io/community</a></li>
<li>前端Git地址：<a href="https://gitee.com/renrenio/renren-ui" target="_blank">https://gitee.com/renrenio/renren-ui</a></li>
<li>后台Git地址：<a href="https://gitee.com/renrenio/renren-security" target="_blank">https://gitee.com/renrenio/renren-security</a></li>
<li>如需关注项目最新动态，请Watch、Star项目，同时也是对项目最好的支持</li>
</ul>
<h3>官方微信群</h3>
<ul>
<li>扫码下面的二维码，关注【人人开源】公众号，回复【加群】，即可根据提示加入微信群！</li>
</ul>
</div>
</el-card>
</template>
<style>
.mod-home {
line-height: 1.5;
line-height: 1.5;
}
</style>

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

@ -72,7 +72,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 +85,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)
}

2
src/views/modules/job/schedule-log.vue
View File

@ -62,7 +62,7 @@ export default {
},
// 失败信息
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)
}

6
src/views/modules/job/schedule.vue
View File

@ -111,7 +111,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 +140,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 +169,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)
}

444
src/views/modules/monitoring/equipment.vue Normal file
View File

@ -0,0 +1,444 @@
<template>
<div class="mod-config">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item>
<el-input v-model="dataForm.key" :placeholder="$t('eq.name') + ' / ' + $t('eq.code')" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button @click="getDataList()">{{ $t('search') }}</el-button>
<el-button v-if="$hasPermission('monitoring:equipment:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
<el-button v-if="$hasPermission('monitoring:equipment:export')" @click="exportHandle()">{{ $t('export') }}</el-button>
</el-form-item>
</el-form>
<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" @operate-event="handleOperations" @refreshDataList="getDataList" />
<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="addOrUpdateVisible = false" />
</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: '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') },
{ 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: '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.getTypeList()
},
methods: {
// 获取设备类型列表
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
},
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>

163
src/views/modules/monitoring/equipmentAlarmLog-add-or-update.vue Normal file
View File

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

158
src/views/modules/monitoring/equipmentAlarmLog.vue Normal file
View File

@ -0,0 +1,158 @@
<template>
<div class="mod-config">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item>
<el-input v-model="dataForm.key" :placeholder="$t('parameter')" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button @click="getDataList()">{{ $t('query') }}</el-button>
<el-button v-if="$hasPermission('monitoring:equipmenalarmlog:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
</el-form-item>
</el-form>
<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" />
<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: {
// 获取数据列表
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>

156
src/views/modules/monitoring/equipmentAttr-add-or-update.vue Normal file
View File

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

249
src/views/modules/monitoring/equipmentCurrentState.vue Normal file
View File

@ -0,0 +1,249 @@
<template>
<div class="mod-config">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<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="getDataList()">{{ $t('query') }}</el-button>
<!-- <el-button v-if="$hasPermission('monitoring:equipmentgroup:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button> -->
</el-form-item>
</el-form>
<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" @operate-event="handleOperations" @refreshDataList="getDataList" />
<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="addOrUpdateVisible = false" />
</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, 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: {
// 设备
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: 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>

184
src/views/modules/monitoring/equipmentFile-add-or-update.vue Normal file
View File

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

161
src/views/modules/monitoring/equipmentFile.vue Normal file
View File

@ -0,0 +1,161 @@
<template>
<div class="mod-config">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item>
<el-input v-model="dataForm.key" :placeholder="$t('parameter')" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button @click="getDataList()">{{ $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: {
// 获取数据列表
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>

187
src/views/modules/monitoring/equipmentGroup.vue Normal file
View File

@ -0,0 +1,187 @@
<template>
<div class="mod-config">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item>
<el-input v-model="dataForm.key" :placeholder="$t('eq.groupname') + ' / ' + $t('eq.groupcode')" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button @click="getDataList()">{{ $t('query') }}</el-button>
<el-button v-if="$hasPermission('monitoring:equipmentgroup:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
</el-form-item>
</el-form>
<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" @operate-event="handleOperations" @refreshDataList="getDataList" />
<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="addOrUpdateVisible = false" />
</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', 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: {
key: ''
},
dataList: [],
pageIndex: 1,
pageSize: 10,
totalPage: 0,
dataListLoading: false,
dataListSelections: [],
addOrUpdateVisible: false
}
},
components: {
AddOrUpdate,
BaseTable
},
activated() {
this.getDataList()
},
methods: {
// 获取数据列表
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>

220
src/views/modules/monitoring/equipmentGroupAlarm.vue Normal file
View File

@ -0,0 +1,220 @@
<template>
<div class="mod-config">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<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-button @click="getDataList()">{{ $t('query') }}</el-button> -->
<el-button v-if="$hasPermission('monitoring:equipmentgroupalarm:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
<!-- <el-button v-if="$hasPermission('monitoring:equipmentgroupalarm:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">
批量删除
</el-button> -->
</el-form-item>
</el-form>
<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" @operate-event="handleOperations" @refreshDataList="getDataList" />
<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="addOrUpdateVisible = false" />
</div>
</template>
<script>
import { calcMaxHeight } from '@/utils'
import { timeFilter } 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') },
{ prop: 'gradeDictValue', name: i18n.t('alarm.level') },
{ prop: 'alarmContent', name: i18n.t('alarm.content') },
{ 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'), 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 }
],
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: {
// 获取字典数据
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
this.$http({
url: this.$http.adornUrl('/monitoring/equipmentGroupAlarm/page'),
method: 'get',
params: this.$http.adornParams({
page: this.pageIndex,
limit: this.pageSize,
groupId: this.$route.params.id
})
}).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>

196
src/views/modules/monitoring/equipmentPlc.vue Normal file
View File

@ -0,0 +1,196 @@
<template>
<div class="mod-config">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item>
<el-input v-model="dataForm.key" :placeholder="$t('name') + ' / ' + $t('code')" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button @click="getDataList()">{{ $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="addOrUpdateVisible = false" />
</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: {
//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>

260
src/views/modules/monitoring/equipmentPlcConnect.vue Normal file
View File

@ -0,0 +1,260 @@
<template>
<div class="mod-config">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item>
<el-input v-model="dataForm.key" :placeholder="$t('eq.name') + ' / ' + $t('eq.code')" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button @click="getDataList()">{{ $t('query') }}</el-button>
<el-button v-if="$hasPermission('monitoring:equipmentplcconnect:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
</el-form-item>
</el-form>
<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" @operate-event="handleOperations" @refreshDataList="getDataList" />
<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="addOrUpdateVisible = false" />
</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: {
// 设备列表
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>

254
src/views/modules/monitoring/equipmentPlcParam-add-or-update.vue Normal file
View File

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

160
src/views/modules/monitoring/equipmentPlcParam.vue Normal file
View File

@ -0,0 +1,160 @@
<template>
<div class="mod-config">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item>
<el-input v-model="dataForm.key" :placeholder="$t('parameter')" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button @click="getDataList()">{{ $t('query') }}</el-button>
<el-button v-if="$hasPermission('monitoring:equipmenplcparam:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
</el-form-item>
</el-form>
<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" />
<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: {
// 获取数据列表
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>

191
src/views/modules/monitoring/equipmentQuantity-add-or-update.vue Normal file
View File

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

166
src/views/modules/monitoring/equipmentQuantity.vue Normal file
View File

@ -0,0 +1,166 @@
<template>
<div class="mod-config">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item>
<el-input v-model="dataForm.key" :placeholder="$t('parameter')" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button @click="getDataList()">{{ $t('query') }}</el-button>
<el-button v-if="$hasPermission('monitoring:equipmenquantity:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
</el-form-item>
</el-form>
<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" />
<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: {
// 获取数据列表
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>

184
src/views/modules/monitoring/equipmentStatusLog-add-or-update.vue Normal file
View File

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

162
src/views/modules/monitoring/equipmentStatusLog.vue Normal file
View File

@ -0,0 +1,162 @@
<template>
<div class="mod-config">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item>
<el-input v-model="dataForm.key" :placeholder="$t('parameter')" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button @click="getDataList()">{{ $t('query') }}</el-button>
<el-button v-if="$hasPermission('monitoring:equipmenstatuslog:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
</el-form-item>
</el-form>
<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" />
<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: {
// 获取数据列表
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>

211
src/views/modules/monitoring/equipmentType.vue Normal file
View File

@ -0,0 +1,211 @@
<template>
<div class="mod-config">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item>
<el-input v-model="dataForm.key" :placeholder="$t('eq.type')" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button @click="getDataList()">{{ $t('query') }}</el-button>
<el-button v-if="$hasPermission('monitoring:equipmenttype:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
</el-form-item>
</el-form>
<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" @operate-event="handleOperations" @refreshDataList="getDataList" />
<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="addOrUpdateVisible = false" />
</div>
</template>
<script>
import { calcMaxHeight } from '@/utils'
import { timeFilter } from '@/utils/filters'
import AddOrUpdate from '@/components/base-dialog/addOrUpdate'
// import AddOrUpdate from './equipmentType-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.type') },
{ prop: 'code', name: i18n.t('eq.typecode') },
{ 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',
infoUrl: '/monitoring/equipmentType',
fields: [
{ name: 'name', label: i18n.t('eq.type') },
{ name: 'code', label: i18n.t('eq.typecode'), api: '/monitoring/equipmentType/getCode' },
{ name: 'parentId', label: i18n.t('eq.parent'), type: 'cascader', props: { label: 'name', value: 'id', checkStrictly: true, emitPath: false }, options: [] },
'remark'
],
operations: [
{ name: 'cancel', showAlways: true },
{ name: 'save', url: '/monitoring/equipmentType', permission: 'monitoring:equipmenttype:save', showOnEdit: false },
{ name: 'update', url: '/monitoring/equipmentType', permission: 'monitoring:equipmenttype:update', showOnEdit: true }
],
extraComponents: [
{
name: 'files',
fieldType: 'array',
label: i18n.t('upload.title'),
component: () => import('@/components/base-upload'),
props: {
// 上传组件需要的 props
url: '/monitoring/attachment/uploadFileFormData',
extraParams: { typeCode: 'EquipmentTypeFile' },
buttonContent: i18n.t('upload.button'),
tip: i18n.t('hints.upload2m')
}
}
]
}
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.getTreeEquipmentType()
this.getDataList()
},
methods: {
// 获取设备类型树形数据
getTreeEquipmentType() {
this.$http({
url: this.$http.adornUrl('/monitoring/equipmentType/getTree'),
method: 'post'
}).then(({ data: res }) => {
if (res && res.code === 0 && res.data.length) {
this.addOrUpdateConfigs.fields.find(item => item.name === 'parentId').options = res.data
} else {
this.addOrUpdateConfigs.fields.find(item => item.name === 'parentId').options.splice(0)
}
})
},
// 获取数据列表
getDataList() {
this.addOrUpdateVisible = false
this.dataListLoading = true
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 }) => {
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.getTreeEquipmentType()
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/equipmentType'),
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>

184
src/views/modules/monitoring/equipmentTypeFile-add-or-update.vue Normal file
View File

@ -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="equipmentTypeId">
<el-input v-model="dataForm.equipmentTypeId" 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="文件类型编码" 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-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>
<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,
equipmentTypeId: '',
fileId: '',
typeCode: '',
fileName: '',
fileUrl: '',
description: '',
enabled: '',
remark: '',
valid: '',
creatorId: '',
creatorName: '',
createTime: '',
updaterId: '',
updaterName: '',
updateTime: '',
version: ''
},
dataRule: {
equipmentTypeId: [{ required: true, message: '设备类型ID不能为空', trigger: 'blur' }],
fileId: [{ required: true, message: '文件ID不能为空', trigger: 'blur' }],
typeCode: [{ required: true, message: '文件类型编码不能为空', trigger: 'blur' }],
fileName: [{ required: true, message: '文件名称不能为空', trigger: 'blur' }],
fileUrl: [{ 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' }]
}
}
},
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/equipmentTypeFile/${this.dataForm.id}`),
method: 'get',
params: this.$http.adornParams()
}).then(({ data }) => {
if (data && data.code === 0) {
this.dataForm.equipmentTypeId = data.equipmentypeFile.equipmentTypeId
this.dataForm.fileId = data.equipmentypeFile.fileId
this.dataForm.typeCode = data.equipmentypeFile.typeCode
this.dataForm.fileName = data.equipmentypeFile.fileName
this.dataForm.fileUrl = data.equipmentypeFile.fileUrl
this.dataForm.description = data.equipmentypeFile.description
this.dataForm.enabled = data.equipmentypeFile.enabled
this.dataForm.remark = data.equipmentypeFile.remark
this.dataForm.valid = data.equipmentypeFile.valid
this.dataForm.creatorId = data.equipmentypeFile.creatorId
this.dataForm.creatorName = data.equipmentypeFile.creatorName
this.dataForm.createTime = data.equipmentypeFile.createTime
this.dataForm.updaterId = data.equipmentypeFile.updaterId
this.dataForm.updaterName = data.equipmentypeFile.updaterName
this.dataForm.updateTime = data.equipmentypeFile.updateTime
this.dataForm.version = data.equipmentypeFile.version
}
})
}
})
},
// 表单提交
dataFormSubmit() {
this.$refs['dataForm'].validate(valid => {
if (valid) {
this.$http({
url: this.$http.adornUrl(`/monitoring/equipmentTypeFile/${!this.dataForm.id ? '' : this.dataForm.id}`),
method: this.dataForm.id ? 'put' : 'post',
data: this.$http.adornData({
id: this.dataForm.id || undefined,
equipmentTypeId: this.dataForm.equipmentTypeId,
fileId: this.dataForm.fileId,
typeCode: this.dataForm.typeCode,
fileName: this.dataForm.fileName,
fileUrl: this.dataForm.fileUrl,
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
})
}).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>

162
src/views/modules/monitoring/equipmentTypeFile.vue Normal file
View File

@ -0,0 +1,162 @@
<template>
<div class="mod-config">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item>
<el-input v-model="dataForm.key" :placeholder="$t('parameter')" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button @click="getDataList()">{{ $t('query') }}</el-button>
<el-button v-if="$hasPermission('monitoring:equipmentypefile:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
</el-form-item>
</el-form>
<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 { calcMaxHeight } from '@/utils'
import { timeFilter } from '@/utils/filters'
import AddOrUpdate from './equipmentTypeFile-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: 'equipmentTypeId', name: '设备类型ID' },
{ prop: 'fileId', name: '文件ID' },
{ prop: 'typeCode', name: i18n.t('file.typeCode') },
{ prop: 'fileName', name: i18n.t('file.name') },
{ prop: 'fileUrl', name: i18n.t('downloadurl') },
{ 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: '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: {
// 获取数据列表
getDataList() {
this.dataListLoading = true
this.$http({
url: this.$http.adornUrl('/monitoring/equipmentTypeFile/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/equipmentTypeFile'),
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>

160
src/views/modules/monitoring/equipmentattr.vue Normal file
View File

@ -0,0 +1,160 @@
<template>
<div class="mod-config">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item>
<el-input v-model="dataForm.key" :placeholder="$t('parameter')" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button @click="getDataList()">{{ $t('query') }}</el-button>
<el-button v-if="$hasPermission('monitoring:equipmenattr:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
</el-form-item>
</el-form>
<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" />
<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 './equipmentAttr-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: 'equipmentId', name: i18n.t('eq.id') },
{ prop: 'attrName', name: i18n.t('attrName') },
{ prop: 'attrValue', name: i18n.t('attrValue') },
{
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: {
// 获取数据列表
getDataList() {
this.dataListLoading = true
this.$http({
url: this.$http.adornUrl('/monitoring/equipmentAttr/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/equipmentAttr'),
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>

189
src/views/modules/monitoring/factory.vue Normal file
View File

@ -0,0 +1,189 @@
<template>
<div class="mod-config">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item>
<el-input v-model="dataForm.key" :placeholder="$t('factory.name') + ' / ' + $t('factory.code')" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button @click="getDataList()">{{ $t('query') }}</el-button>
<el-button v-if="$hasPermission('monitoring:factory:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
</el-form-item>
</el-form>
<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" @operate-event="handleOperations" @refreshDataList="getDataList" />
<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="addOrUpdateVisible = false" />
</div>
</template>
<script>
import { calcMaxHeight } from '@/utils'
import { timeFilter } from '@/utils/filters'
// import AddOrUpdate from './factory-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',
name: i18n.t('index')
},
{ prop: 'createTime', name: i18n.t('createTime'), filter: timeFilter },
{ prop: 'name', name: i18n.t('factory.name') },
{ prop: 'code', name: i18n.t('factory.code') },
{ prop: 'address', name: i18n.t('addr') },
{ 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',
infoUrl: '/monitoring/factory',
fields: [
'name',
{
name: 'code',
api: '/monitoring/factory/getCode'
},
{
name: 'address',
label: i18n.t('addr'),
placeholder: i18n.t('hints.addr')
},
'remark'
],
operations: [
{ name: 'reset', url: true, showAlways: true },
{ name: 'cancel', url: true, showAlways: true },
{ name: 'save', url: '/monitoring/factory', permission: 'monitoring:factory:save', showOnEdit: false },
{ name: 'update', url: '/monitoring/factory', permission: 'monitoring:factory:update', showOnEdit: true }
]
}
export default {
data() {
return {
calcMaxHeight,
addOrUpdateConfigs,
tableConfigs,
dataForm: {
key: ''
},
dataList: [],
pageIndex: 1,
pageSize: 10,
totalPage: 0,
dataListLoading: false,
dataListSelections: [],
addOrUpdateVisible: false
}
},
components: {
AddOrUpdate,
BaseTable
},
activated() {
this.getDataList()
},
methods: {
// 获取数据列表
getDataList() {
this.addOrUpdateVisible = false
this.dataListLoading = true
this.$http({
url: this.$http.adornUrl('/monitoring/factory/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.totalCount
} 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.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/factory'),
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>

594
src/views/modules/monitoring/icons-dialog.vue Normal file
View File

@ -0,0 +1,594 @@
<template>
<el-dialog :visible.sync="visible" :title="'Icons'">
<div style="background: #efefef; max-height: 500px; overflow: hidden scroll;">
<el-row :gutter="10">
<el-col v-for="icon in icons" :key="icon" :span="3" class="col-hover" style="padding: 8px; text-align: center; cursor: pointer;" @click.native="handleCopy(icon)">
<svg class="icon-svg aui-navbar__icon-menu" style="height: 24px; width: 24px;" aria-hidden="true">
<use v-bind:xlink:href="`#${icon}`"></use>
</svg>
</el-col>
</el-row>
</div>
<div slot="footer">
<el-button @click="close()">Close</el-button>
</div>
</el-dialog>
</template>
<script>
export default {
name: 'IconsDialog',
data() {
return {
icons: [],
visible: false
}
},
methods: {
init() {
this.loadIcons()
this.visible = true
},
loadIcons() {
this.icons = [
'icon-check-circle',
'icon-CI',
'icon-Dollar',
'icon-compass',
'icon-close-circle',
'icon-frown',
'icon-info-circle',
'icon-left-circle',
'icon-down-circle',
'icon-EURO',
'icon-copyright',
'icon-minus-circle',
'icon-meh',
'icon-plus-circle',
'icon-play-circle',
'icon-question-circle',
'icon-Pound',
'icon-right-circle',
'icon-smile',
'icon-trademark',
'icon-time-circle',
'icon-timeout',
'icon-earth',
'icon-YUAN',
'icon-up-circle',
'icon-warning-circle',
'icon-sync',
'icon-transaction',
'icon-undo',
'icon-redo',
'icon-reload',
'icon-reloadtime',
'icon-message',
'icon-dashboard',
'icon-issuesclose',
'icon-poweroff',
'icon-logout',
'icon-login',
'icon-piechart',
'icon-setting',
'icon-eye',
'icon-location',
'icon-edit-square',
'icon-export',
'icon-save',
'icon-Import',
'icon-appstore',
'icon-close-square',
'icon-down-square',
'icon-layout',
'icon-left-square',
'icon-play-square',
'icon-control',
'icon-codelibrary',
'icon-detail',
'icon-minus-square',
'icon-plus-square',
'icon-right-square',
'icon-project',
'icon-wallet',
'icon-up-square',
'icon-calculator',
'icon-interation',
'icon-check-square',
'icon-border',
'icon-border-outer',
'icon-border-top',
'icon-border-bottom',
'icon-border-left',
'icon-border-right',
'icon-border-inner',
'icon-border-verticle',
'icon-border-horizontal',
'icon-radius-bottomleft',
'icon-radius-bottomright',
'icon-radius-upleft',
'icon-radius-upright',
'icon-radius-setting',
'icon-adduser',
'icon-deleteteam',
'icon-deleteuser',
'icon-addteam',
'icon-user',
'icon-team',
'icon-areachart',
'icon-linechart',
'icon-barchart',
'icon-pointmap',
'icon-container',
'icon-database',
'icon-sever',
'icon-mobile',
'icon-tablet',
'icon-redenvelope',
'icon-book',
'icon-filedone',
'icon-reconciliation',
'icon-file-exception',
'icon-filesync',
'icon-filesearch',
'icon-solution',
'icon-fileprotect',
'icon-file-add',
'icon-file-excel',
'icon-file-exclamation',
'icon-file-pdf',
'icon-file-image',
'icon-file-markdown',
'icon-file-unknown',
'icon-file-ppt',
'icon-file-word',
'icon-file',
'icon-file-zip',
'icon-file-text',
'icon-file-copy',
'icon-snippets',
'icon-audit',
'icon-diff',
'icon-Batchfolding',
'icon-securityscan',
'icon-propertysafety',
'icon-safetycertificate',
'icon-insurance',
'icon-alert',
'icon-delete',
'icon-hourglass',
'icon-bulb',
'icon-experiment',
'icon-bell',
'icon-trophy',
'icon-rest',
'icon-USB',
'icon-skin',
'icon-home',
'icon-bank',
'icon-filter',
'icon-funnelplot',
'icon-like',
'icon-unlike',
'icon-unlock',
'icon-lock',
'icon-customerservice',
'icon-flag',
'icon-moneycollect',
'icon-medicinebox',
'icon-shop',
'icon-rocket',
'icon-shopping',
'icon-folder',
'icon-folder-open',
'icon-folder-add',
'icon-deploymentunit',
'icon-accountbook',
'icon-contacts',
'icon-carryout',
'icon-calendar-check',
'icon-calendar',
'icon-scan',
'icon-select',
'icon-boxplot',
'icon-build',
'icon-sliders',
'icon-laptop',
'icon-barcode',
'icon-camera',
'icon-cluster',
'icon-gateway',
'icon-car',
'icon-printer',
'icon-read',
'icon-cloud-server',
'icon-cloud-upload',
'icon-cloud',
'icon-cloud-download',
'icon-cloud-sync',
'icon-video',
'icon-notification',
'icon-sound',
'icon-radarchart',
'icon-qrcode',
'icon-fund',
'icon-image',
'icon-mail',
'icon-table',
'icon-idcard',
'icon-creditcard',
'icon-heart',
'icon-block',
'icon-error',
'icon-star',
'icon-gold',
'icon-heatmap',
'icon-wifi',
'icon-attachment',
'icon-edit',
'icon-key',
'icon-api',
'icon-disconnect',
'icon-highlight',
'icon-monitor',
'icon-link',
'icon-man',
'icon-percentage',
'icon-search',
'icon-pushpin',
'icon-phone',
'icon-shake',
'icon-tag',
'icon-wrench',
'icon-woman',
'icon-tags',
'icon-scissor',
'icon-mr',
'icon-share',
'icon-branches',
'icon-fork',
'icon-shrink',
'icon-arrawsalt',
'icon-verticalright',
'icon-verticalleft',
'icon-right',
'icon-left',
'icon-up',
'icon-down',
'icon-fullscreen',
'icon-fullscreen-exit',
'icon-doubleleft',
'icon-doubleright',
'icon-arrowright',
'icon-arrowup',
'icon-arrowleft',
'icon-arrowdown',
'icon-upload',
'icon-colum-height',
'icon-vertical-align-botto',
'icon-vertical-align-middl',
'icon-totop',
'icon-vertical-align-top',
'icon-download',
'icon-sort-descending',
'icon-sort-ascending',
'icon-fall',
'icon-swap',
'icon-stock',
'icon-rise',
'icon-indent',
'icon-outdent',
'icon-menu',
'icon-unorderedlist',
'icon-orderedlist',
'icon-align-right',
'icon-align-center',
'icon-align-left',
'icon-pic-center',
'icon-pic-right',
'icon-pic-left',
'icon-bold',
'icon-font-colors',
'icon-exclaimination',
'icon-font-size',
'icon-infomation',
'icon-line-height',
'icon-strikethrough',
'icon-underline',
'icon-number',
'icon-italic',
'icon-code',
'icon-column-width',
'icon-check',
'icon-ellipsis',
'icon-dash',
'icon-close',
'icon-enter',
'icon-line',
'icon-minus',
'icon-question',
'icon-plus',
'icon-rollback',
'icon-small-dash',
'icon-pause',
'icon-bg-colors',
'icon-crown',
'icon-drag',
'icon-desktop',
'icon-gift',
'icon-stop',
'icon-fire',
'icon-thunderbolt',
'icon-check-circle-fill',
'icon-left-circle-fill',
'icon-down-circle-fill',
'icon-minus-circle-fill',
'icon-close-circle-fill',
'icon-info-circle-fill',
'icon-up-circle-fill',
'icon-right-circle-fill',
'icon-plus-circle-fill',
'icon-question-circle-fill',
'icon-EURO-circle-fill',
'icon-frown-fill',
'icon-copyright-circle-fil',
'icon-CI-circle-fill',
'icon-compass-fill',
'icon-Dollar-circle-fill',
'icon-poweroff-circle-fill',
'icon-meh-fill',
'icon-play-circle-fill',
'icon-Pound-circle-fill',
'icon-smile-fill',
'icon-stop-fill',
'icon-warning-circle-fill',
'icon-time-circle-fill',
'icon-trademark-circle-fil',
'icon-YUAN-circle-fill',
'icon-heart-fill',
'icon-piechart-circle-fil',
'icon-dashboard-fill',
'icon-message-fill',
'icon-check-square-fill',
'icon-down-square-fill',
'icon-minus-square-fill',
'icon-close-square-fill',
'icon-codelibrary-fill',
'icon-left-square-fill',
'icon-play-square-fill',
'icon-up-square-fill',
'icon-right-square-fill',
'icon-plus-square-fill',
'icon-accountbook-fill',
'icon-carryout-fill',
'icon-calendar-fill',
'icon-calculator-fill',
'icon-interation-fill',
'icon-project-fill',
'icon-detail-fill',
'icon-save-fill',
'icon-wallet-fill',
'icon-control-fill',
'icon-layout-fill',
'icon-appstore-fill',
'icon-mobile-fill',
'icon-tablet-fill',
'icon-book-fill',
'icon-redenvelope-fill',
'icon-safetycertificate-f',
'icon-propertysafety-fill',
'icon-insurance-fill',
'icon-securityscan-fill',
'icon-file-exclamation-fil',
'icon-file-add-fill',
'icon-file-fill',
'icon-file-excel-fill',
'icon-file-markdown-fill',
'icon-file-text-fill',
'icon-file-ppt-fill',
'icon-file-unknown-fill',
'icon-file-word-fill',
'icon-file-zip-fill',
'icon-file-pdf-fill',
'icon-file-image-fill',
'icon-diff-fill',
'icon-file-copy-fill',
'icon-snippets-fill',
'icon-batchfolding-fill',
'icon-reconciliation-fill',
'icon-folder-add-fill',
'icon-folder-fill',
'icon-folder-open-fill',
'icon-database-fill',
'icon-container-fill',
'icon-sever-fill',
'icon-calendar-check-fill',
'icon-image-fill',
'icon-idcard-fill',
'icon-creditcard-fill',
'icon-fund-fill',
'icon-read-fill',
'icon-contacts-fill',
'icon-delete-fill',
'icon-notification-fill',
'icon-flag-fill',
'icon-moneycollect-fill',
'icon-medicinebox-fill',
'icon-rest-fill',
'icon-shopping-fill',
'icon-skin-fill',
'icon-video-fill',
'icon-sound-fill',
'icon-bulb-fill',
'icon-bell-fill',
'icon-filter-fill',
'icon-fire-fill',
'icon-funnelplot-fill',
'icon-gift-fill',
'icon-hourglass-fill',
'icon-home-fill',
'icon-trophy-fill',
'icon-location-fill',
'icon-cloud-fill',
'icon-customerservice-fill',
'icon-experiment-fill',
'icon-eye-fill',
'icon-like-fill',
'icon-lock-fill',
'icon-unlike-fill',
'icon-star-fill',
'icon-unlock-fill',
'icon-alert-fill',
'icon-api-fill',
'icon-highlight-fill',
'icon-phone-fill',
'icon-edit-fill',
'icon-pushpin-fill',
'icon-rocket-fill',
'icon-thunderbolt-fill',
'icon-tag-fill',
'icon-wrench-fill',
'icon-tags-fill',
'icon-bank-fill',
'icon-camera-fill',
'icon-error-fill',
'icon-crown-fill',
'icon-mail-fill',
'icon-car-fill',
'icon-printer-fill',
'icon-shop-fill',
'icon-setting-fill',
'icon-USB-fill',
'icon-golden-fill',
'icon-build-fill',
'icon-boxplot-fill',
'icon-sliders-fill',
'icon-alibaba',
'icon-alibabacloud',
'icon-antdesign',
'icon-ant-cloud',
'icon-behance',
'icon-googleplus',
'icon-medium',
'icon-google',
'icon-IE',
'icon-amazon',
'icon-slack',
'icon-alipay',
'icon-taobao',
'icon-zhihu',
'icon-HTML',
'icon-linkedin',
'icon-yahoo',
'icon-facebook',
'icon-skype',
'icon-CodeSandbox',
'icon-chrome',
'icon-codepen',
'icon-aliwangwang',
'icon-apple',
'icon-android',
'icon-sketch',
'icon-Gitlab',
'icon-dribbble',
'icon-instagram',
'icon-reddit',
'icon-windows',
'icon-yuque',
'icon-Youtube',
'icon-Gitlab-fill',
'icon-dropbox',
'icon-dingtalk',
'icon-android-fill',
'icon-apple-fill',
'icon-HTML-fill',
'icon-windows-fill',
'icon-QQ',
'icon-twitter',
'icon-skype-fill',
'icon-weibo',
'icon-yuque-fill',
'icon-Youtube-fill',
'icon-yahoo-fill',
'icon-wechat-fill',
'icon-chrome-fill',
'icon-alipay-circle-fill',
'icon-aliwangwang-fill',
'icon-behance-circle-fill',
'icon-amazon-circle-fill',
'icon-codepen-circle-fill',
'icon-CodeSandbox-circle-f',
'icon-dropbox-circle-fill',
'icon-github-fill',
'icon-dribbble-circle-fill',
'icon-googleplus-circle-f',
'icon-medium-circle-fill',
'icon-QQ-circle-fill',
'icon-IE-circle-fill',
'icon-google-circle-fill',
'icon-dingtalk-circle-fill',
'icon-sketch-circle-fill',
'icon-slack-circle-fill',
'icon-twitter-circle-fill',
'icon-taobao-circle-fill',
'icon-weibo-circle-fill',
'icon-zhihu-circle-fill',
'icon-reddit-circle-fill',
'icon-alipay-square-fill',
'icon-dingtalk-square-fill',
'icon-CodeSandbox-square-f',
'icon-behance-square-fill',
'icon-amazon-square-fill',
'icon-codepen-square-fill',
'icon-dribbble-square-fill',
'icon-dropbox-square-fill',
'icon-facebook-fill',
'icon-googleplus-square-f',
'icon-google-square-fill',
'icon-instagram-fill',
'icon-IE-square-fill',
'icon-medium-square-fill',
'icon-linkedin-fill',
'icon-QQ-square-fill',
'icon-reddit-square-fill',
'icon-twitter-square-fill',
'icon-sketch-square-fill',
'icon-slack-square-fill',
'icon-taobao-square-fill',
'icon-weibo-square-fill',
'icon-zhihu-square-fill',
'icon-zoomout',
'icon-apartment',
'icon-audio',
'icon-audio-fill',
'icon-robot',
'icon-zoomin'
]
},
handleCopy(v) {
if (navigator.clipboard) {
/** 如果支持剪切板api */
navigator.clipboard
.writeText(`<svg class="icon-svg aui-navbar__icon-menu" style="height: 24px; width: 24px;" aria-hidden="true"><use xlink:href="#${v}"></use></svg>`)
.then(() => {
this.$message.success('已复制')
})
} else {
this.$message.info('请打开 Console 手动复制.')
console.log(`<svg class="icon-svg aui-navbar__icon-menu" style="height: 24px; width: 24px;" aria-hidden="true"><use xlink:href="#${v}"></use></svg>`)
}
},
close() {
this.visible = false
this.$emit('destory-me')
}
}
}
</script>
<style scoped>
.col-hover:hover {
background: #ddd;
}
</style>

270
src/views/modules/monitoring/product.vue Normal file
View File

@ -0,0 +1,270 @@
<template>
<div class="mod-config">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item>
<el-input v-model="dataForm.key" :placeholder="$t('prod.name') + ' / ' + $t('prod.code')" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button @click="getDataList()">{{ $t('query') }}</el-button>
<!-- <el-button @click="addOrEdit()">测试</el-button> -->
<!-- <el-button v-if="$hasPermission('monitoring:product:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button> -->
<el-button v-if="$hasPermission('monitoring:product:save')" type="primary" @click="addOrEdit()">{{ $t('add') }}</el-button>
</el-form-item>
</el-form>
<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" @operate-event="handleOperations" @refreshDataList="getDataList" />
<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> -->
<base-dialog v-if="showbasedialog" ref="basedialog" :configs="addOrUpdateConfigs" @refreshDataList="getDataList" @destory-dialog="showbasedialog = false" />
</div>
</template>
<script>
import { calcMaxHeight } from '@/utils'
import { timeFilter } from '@/utils/filters'
// import AddOrUpdate from './product-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 BaseDialog from '@/components/base-dialog/addOrUpdate'
import moment from 'moment'
import dictListMixin from '@/mixins/dictlist-module'
import { dictFilter } from '@/utils/filters'
const UnitDictTypeId = '1557173812109242370'
const ProductTypeDictTypeId = '1557179530308616193'
const tableConfigs = [
{ type: 'index', width: 100, name: i18n.t('index') },
{ prop: 'createTime', name: i18n.t('createTime'), filter: timeFilter },
{ prop: 'name', name: i18n.t('prod.name') },
{ prop: 'code', name: i18n.t('prod.code') },
{ prop: 'specifications', name: i18n.t('prod.spec') },
{ prop: 'unitDictValue', name: i18n.t('unit'), filter: dictFilter(UnitDictTypeId) },
{ prop: 'operations', name: i18n.t('handle'), fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['viewAttr', 'delete'] }
]
const addOrUpdateConfigs = {
type: 'dialog', // dialog | drawer | page
infoUrl: '/monitoring/product',
fields: [
'name',
{
name: 'code',
api: '/monitoring/product/getCode'
},
{
name: 'processTime',
label: i18n.t('prod.processTime'),
placeholder: i18n.t('prod.processTimeHints'),
type: 'number',
required: true,
rules: [
{
type: 'number',
trigger: 'blur',
transform: val => Number(val),
message: i18n.t('hints.number')
}
]
},
{
name: 'typeDictValue',
label: i18n.t('prod.type'), // 对于非常见属性，最好自己指定label
type: 'select',
options: [
// 动态获取
]
},
{
name: 'unitDictValue',
label: i18n.t('unit'),
type: 'select',
// placeholder: '请选择单位',
options: [
// 动态获取
]
},
{
name: 'area',
label: i18n.t('prod.area'),
type: 'number',
rules: [{ type: 'number', transform: val => Number(val), message: i18n.t('hints.number'), trigger: 'blur' }]
},
'specifications',
'remark'
],
operations: [
{ name: 'cancel', url: true, showAlways: true },
{ name: 'save', url: '/monitoring/product', permission: 'monitoring:product:save', showOnEdit: false },
{ name: 'update', url: '/monitoring/product', permission: 'monitoring:product:update', showOnEdit: true }
],
subtable: {
// for i18n
title: i18n.t('prod.attr'),
url: '/monitoring/productArrt',
relatedField: 'productId',
tableConfigs: [
{ type: 'index', width: 100, name: i18n.t('index') },
{ prop: 'createTime', name: i18n.t('createTime'), filter: val => (val ? moment(val).format('YYYY-MM-DD hh:mm:ss') : '-') },
{ prop: 'name', name: i18n.t('attrName'), formField: true, rules: [{ required: true, message: i18n.t('required'), trigger: 'blur' }] },
{ prop: 'code', name: i18n.t('attrValue'), formField: true },
{ prop: 'operations', name: i18n.t('handle'), fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['edit', 'delete'] }
]
}
}
export default {
mixins: [dictListMixin],
data() {
return {
calcMaxHeight,
tableConfigs,
dataForm: {
key: ''
},
dataList: [],
pageIndex: 1,
pageSize: 10,
totalPage: 0,
dataListLoading: false,
dataListSelections: [],
addOrUpdateVisible: false,
addOrUpdateConfigs,
showbasedialog: false
}
},
components: {
// AddOrUpdate,
BaseTable,
BaseDialog
},
created() {
this.initDictList([UnitDictTypeId, ProductTypeDictTypeId])
this.addOrUpdateConfigs.fields.forEach(item => {
if (item.name) {
if (item.name === 'typeDictValue') {
item.options = this.dictList[ProductTypeDictTypeId]
} else if (item.name === 'unitDictValue') {
item.options = this.dictList[UnitDictTypeId]
}
}
})
},
activated() {
this.getDataList()
},
methods: {
//
addOrEdit(id) {
this.showbasedialog = true
this.$nextTick(() => {
this.$refs.basedialog.init(id)
})
},
// 获取数据列表
getDataList() {
// console.log("after dialog close: ", this.showbasedialog)
this.showbasedialog = false // 清理弹窗
this.dataListLoading = true
this.$http({
url: this.$http.adornUrl('/monitoring/product/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)
})
},
// 表格操作事件管理
handleOperations({ type, data }) {
switch (type) {
case 'viewAttr': // <== 对照 tableConfig
return this.addOrEdit(data)
case 'delete':
return this.deleteHandle(data)
}
},
// 删除
deleteHandle(id) {
console.log('id is: ', id)
var ids = id
? [id]
: // ? [1556817256347828335]
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/product'),
method: 'delete',
data: ids
// or : data: this.$http.adornData(ids, false, 'raw')
})
// or: this.$http.delete(this.$http.adornUrl('/monitoring/product'), { data: this.$http.adornData(ids, false) })
.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>

222
src/views/modules/monitoring/productArrt.vue Normal file
View File

@ -0,0 +1,222 @@
<template>
<div class="mod-config">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item>
<el-input v-model="dataForm.key" :placeholder="$t('parameter')" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button @click="getDataList()">{{ $t('query') }}</el-button>
<el-button v-if="$hasPermission('monitoring:productarrt:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
</el-form-item>
</el-form>
<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" :configs="addOrUpdateConfigs" ref="addOrUpdate" @refreshDataList="getDataList" @destroy-dialog="addOrUpdateVisible = false" />
</div>
</template>
<script>
import { calcMaxHeight } from '@/utils'
import { timeFilter } from '@/utils/filters'
// import AddOrUpdate from './productArrt-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 = [
{ prop: 'createTime', name: i18n.t('createTime'), filter: timeFilter },
{ prop: 'name', name: i18n.t('attrName') },
{ prop: 'code', name: i18n.t('prod.attrcode') },
{ prop: 'productId', name: i18n.t('prod.id') },
{ prop: 'value', name: i18n.t('attrValue') },
{ prop: 'description', name: i18n.t('desc') },
{ prop: 'operations', name: i18n.t('handle'), fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['edit', 'delete'] }
]
const addOrUpdateConfigs = {
type: 'dialog',
infoUrl: '/monitoring/productArrt',
fields: [
{
name: 'name',
label: i18n.t('attrName'),
placeholder: i18n.t('prod.attrnameHints')
},
{
name: 'code',
label: i18n.t('prod.attrcode'),
placeholder: i18n.t('prod.attrcodeHints')
},
{
name: 'productId',
label: i18n.t('prod.relatedPid'),
type: 'select',
options: []
},
{
name: 'value',
label: i18n.t('attrValue'),
placeholder: i18n.t('prod.attrvalueHints')
},
{
name: 'description',
label: i18n.t('desc'),
placeholder: i18n.t('prod.descHints')
}
],
operations: [
{ name: 'cancel', showAlways: true },
{ name: 'save', url: '/monitoring/productArrt', permission: 'monitoring:productarrt:save', showOnEdit: false },
{ name: 'update', url: '/monitoring/productArrt', permission: 'monitoring:productarrt:update', showOnEdit: true }
]
}
export default {
data() {
return {
calcMaxHeight,
addOrUpdateConfigs,
tableConfigs,
dataForm: {
key: ''
},
dataList: [],
pageIndex: 1,
pageSize: 10,
totalPage: 0,
dataListLoading: false,
dataListSelections: [],
addOrUpdateVisible: false
}
},
components: {
AddOrUpdate,
BaseTable
},
activated() {
this.getProductList()
this.getDataList()
},
methods: {
// 获取产品列表
getProductList() {
this.$http({
url: this.$http.adornUrl('/monitoring/product/page'),
method: 'get',
params: this.$http.adornParams({
limit: 999,
page: 1
})
}).then(({ data: res }) => {
if (res && res.code === 0) {
this.addOrUpdateConfigs.fields.forEach(item => {
if (item.name === 'productId') item.options = res.data.list.map(item => ({ label: item.name, value: item.id }))
})
} else {
this.addOrUpdateConfigs.fields.forEach(item => {
if (item.name === 'productId') item.options.splice(0)
})
// this.plList.splice(0)
}
})
},
// 获取数据列表
getDataList() {
this.dataListLoading = true
this.$http({
url: this.$http.adornUrl('/monitoring/productArrt/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 '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/productArrt'),
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>

215
src/views/modules/monitoring/productionLine.vue Normal file
View File

@ -0,0 +1,215 @@
<template>
<div class="mod-config">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item>
<el-input v-model="dataForm.key" :placeholder="$t('pl.name')" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button @click="getDataList()">{{ $t('query') }}</el-button>
<el-button v-if="$hasPermission('monitoring:productionline:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
</el-form-item>
</el-form>
<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" @operate-event="handleOperations" @refreshDataList="getDataList" />
<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="addOrUpdateVisible = false" />
</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 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: 'factoryName', name: i18n.t('factory.title') },
{ prop: 'name', name: i18n.t('pl.name') },
{ prop: 'code', name: i18n.t('pl.code') },
{ prop: 'status', name: i18n.t('pl.status') },
{ prop: 'description', name: i18n.t('desc') },
{ prop: 'remark', name: i18n.t('remark') },
{ prop: 'operations', name: i18n.t('handle'), fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['edit', 'delete'] }
]
const addOrUpdateConfigs = {
type: 'dialog',
infoUrl: '/monitoring/productionLine',
fields: [
'name',
{ name: 'code', api: '/monitoring/productionLine/getCode' },
{
name: 'factoryId',
label: i18n.t('factory.title'),
type: 'select',
placeholder: i18n.t('pl.factoryHints'),
options: []
},
{
name: 'tvalue',
label: i18n.t('pl.tvalue'),
placeholder: i18n.t('hints.number'),
type: 'number', // TODO: 可改进为自动应用 number 验证，此时还必须添加下述规则：
required: true,
rules: [{ type: 'number', transform: val => Number(val), trigger: 'blur', message: i18n.t('hints.number') }]
},
'description',
'remark'
],
operations: [
{ name: 'cancel', url: true, showAlways: true },
{ name: 'save', url: '/monitoring/productionLine', permission: 'monitoring:productionline:save', showOnEdit: false },
{ name: 'update', url: '/monitoring/productionLine', permission: 'monitoring:productionline:update', showOnEdit: true }
]
}
export default {
data() {
return {
calcMaxHeight,
addOrUpdateConfigs,
tableConfigs,
dataForm: {
key: ''
},
dataList: [],
factoryList: [],
pageIndex: 1,
pageSize: 10,
totalPage: 0,
dataListLoading: false,
dataListSelections: [],
addOrUpdateVisible: false
}
},
components: {
AddOrUpdate,
BaseTable
},
activated() {
this.getFactoryList()
this.getDataList()
},
methods: {
// 获取工厂列表
getFactoryList() {
this.$http.get(this.$http.adornUrl('/monitoring/factory/list')).then(({ data: res }) => {
if (res && res.code === 0) {
this.factoryList = res.data
} else {
this.factoryList.splice(0)
}
this.addOrUpdateConfigs.fields.forEach(item => {
if (item.name === 'factoryId') {
console.log('res', item)
item.options = this.factoryList.map(f => ({ value: f.id, label: f.name }))
}
})
})
},
// 获取数据列表
getDataList() {
this.addOrUpdateVisible = false
this.dataListLoading = true
this.$http({
url: this.$http.adornUrl('/monitoring/productionLine/page'),
method: 'get',
params: this.$http.adornParams({
page: this.pageIndex,
limit: this.pageSize,
key: this.dataForm.key
})
}).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.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/productionLine'),
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>

121
src/views/modules/monitoring/productionLineRecSch-add-or-update.vue Normal file
View File

@ -0,0 +1,121 @@
<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="productionLineId">
<el-input v-model="dataForm.productionLineId" placeholder="产线id"></el-input>
</el-form-item>
<el-form-item label="上一次记录时间至该条记录时间端内上片数量" prop="inputNum">
<el-input v-model="dataForm.inputNum" placeholder="上一次记录时间至该条记录时间端内上片数量"></el-input>
</el-form-item>
<el-form-item label="上一次记录时间至该条记录时间端内下片数量" prop="outputNum">
<el-input v-model="dataForm.outputNum" placeholder="上一次记录时间至该条记录时间端内下片数量"></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-item label="删除标志，是否有效:1 可用 0不可用" prop="valid">
<el-input v-model="dataForm.valid" placeholder="删除标志，是否有效:1 可用 0不可用"></el-input>
</el-form-item>
<el-form-item label="该记录时间点的累计上片数量" prop="sumInputNum">
<el-input v-model="dataForm.sumInputNum" placeholder="该记录时间点的累计上片数量"></el-input>
</el-form-item>
<el-form-item label="该记录时间点的累计下片数量" prop="sumOutputNum">
<el-input v-model="dataForm.sumOutputNum" 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,
productionLineId: '',
inputNum: '',
outputNum: '',
recordTime: '',
valid: '',
sumInputNum: '',
sumOutputNum: ''
},
dataRule: {
productionLineId: [{ required: true, message: '产线id不能为空', trigger: 'blur' }],
inputNum: [{ required: true, message: '上一次记录时间至该条记录时间端内上片数量不能为空', trigger: 'blur' }],
outputNum: [{ required: true, message: '上一次记录时间至该条记录时间端内下片数量不能为空', trigger: 'blur' }],
recordTime: [{ required: true, message: '记录时间不能为空', trigger: 'blur' }],
valid: [{ required: true, message: '删除标志，是否有效:1 可用 0不可用不能为空', trigger: 'blur' }],
sumInputNum: [{ required: true, message: '该记录时间点的累计上片数量不能为空', trigger: 'blur' }],
sumOutputNum: [{ 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/productionLineRecSch/${this.dataForm.id}`),
method: 'get',
params: this.$http.adornParams()
}).then(({ data }) => {
if (data && data.code === 0) {
this.dataForm.productionLineId = data.productionLineRecSch.productionLineId
this.dataForm.inputNum = data.productionLineRecSch.inputNum
this.dataForm.outputNum = data.productionLineRecSch.outputNum
this.dataForm.recordTime = data.productionLineRecSch.recordTime
this.dataForm.valid = data.productionLineRecSch.valid
this.dataForm.sumInputNum = data.productionLineRecSch.sumInputNum
this.dataForm.sumOutputNum = data.productionLineRecSch.sumOutputNum
}
})
}
})
},
// 表单提交
dataFormSubmit() {
this.$refs['dataForm'].validate(valid => {
if (valid) {
this.$http({
url: this.$http.adornUrl(`/monitoring/productionLineRecSch/${!this.dataForm.id ? '' : this.dataForm.id}`),
method: this.dataForm.id ? 'put' : 'post',
data: this.$http.adornData({
id: this.dataForm.id || undefined,
productionLineId: this.dataForm.productionLineId,
inputNum: this.dataForm.inputNum,
outputNum: this.dataForm.outputNum,
recordTime: this.dataForm.recordTime,
valid: this.dataForm.valid,
sumInputNum: this.dataForm.sumInputNum,
sumOutputNum: this.dataForm.sumOutputNum
})
}).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>

153
src/views/modules/monitoring/productionLineRecSch.vue Normal file
View File

@ -0,0 +1,153 @@
<template>
<div class="mod-config">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item>
<el-input v-model="dataForm.key" :placeholder="$t('parameter')" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button @click="getDataList()">{{ $t('query') }}</el-button>
<el-button v-if="$hasPermission('monitoring:productionlinerecsch:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
</el-form-item>
</el-form>
<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 { calcMaxHeight } from '@/utils'
import { timeFilter } from '@/utils/filters'
import AddOrUpdate from './productionLineRecSch-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: 'productionLineId', name: i18n.t('pl.id') },
{ prop: 'inputNum', name: '上一次记录时间至该条记录时间端内上片数量' },
{ prop: 'outputNum', name: '上一次记录时间至该条记录时间端内下片数量' },
{ prop: 'recordTime', name: i18n.t('recordTime') },
{ prop: 'valid', name: i18n.t('delMark') },
{ prop: 'sumInputNum', name: '该记录时间点的累计上片数量' },
{ prop: 'sumOutputNum', name: '该记录时间点的累计下片数量' },
{ prop: 'operations', name: i18n.t('handle'), fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['edit', 'delete'] }
]
export default {
data() {
return {
calcMaxHeight,
tableConfigs,
dataForm: {
key: ''
},
dataList: [],
pageIndex: 1,
pageSize: 10,
totalPage: 0,
dataListLoading: false,
dataListSelections: [],
addOrUpdateVisible: false
}
},
components: {
AddOrUpdate,
BaseTable
},
activated() {
this.getDataList()
},
methods: {
// 获取数据列表
getDataList() {
this.dataListLoading = true
this.$http({
url: this.$http.adornUrl('/monitoring/productionLineRecSch/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/productionLineRecSch'),
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>

373
src/views/modules/monitoring/qualityInspectionCurrent.vue Normal file
View File

@ -0,0 +1,373 @@
<template>
<div class="mod-config">
<el-form :inline="true" @keyup.enter.native="getDataList()">
<el-form-item>
<!-- type="datetimerange" -->
<el-date-picker
type="daterange"
v-model="datetime"
value-format="yyyy-MM-ddTHH:mm:ss"
:start-placeholder="$t('startTime')"
:end-placeholder="$t('endTime')"
:range-separator="$t('to')"
:default-time="['00:00:00', '23:59:59']"
:picker-options="quickOptions"
clearable
/>
</el-form-item>
<el-form-item>
<el-button @click="getDataList()">{{ $t('query') }}</el-button>
<!-- <el-button v-if="$hasPermission('monitoring:qualityinspectionrecord:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button> -->
</el-form-item>
</el-form>
<div class="quality-inspection-current base-container">
<el-row>
<el-col>
<small-title :size="'md'">{{ $t('inspect.ioTotal') }}</small-title>
<el-row style="margin-top: 12px;">
<base-table :data="dataListStatic" :table-head-configs="tableConfigStatic" :max-height="500" @operate-event="handleOperations" @refreshDataList="getDataList" />
</el-row>
</el-col>
</el-row>
<el-row style="margin-top: 28px;">
<el-col>
<el-row>
<small-title :size="'md'">{{ $t('inspect.plTotal') }}</small-title>
</el-row>
<el-row style="margin-top: 8px;">
<el-radio-group v-model="dataType" size="medium" @change="handleDataTypeChange">
<el-radio-button :label="$t('table2')"></el-radio-button>
<el-radio-button :label="$t('graph')"></el-radio-button>
</el-radio-group>
</el-row>
<el-row style="margin-top: 12px;">
<base-table
v-if="!showGraph"
:data="dataListDynamic"
:table-head-configs="tableConfigDynamic"
:max-height="500"
@operate-event="handleOperations"
@refreshDataList="getDataList"
/>
<fake-chart v-else :categories="echartCategories" :type-list="echartCheckTypes" :series-data="echartsData" />
</el-row>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
import { calcMaxHeight } from '@/utils'
import { timeFilter } from '@/utils/filters'
import moment from 'moment'
import i18n from '@/i18n'
import BaseTable from '@/components/base-table'
import SmallTitle from '@/components/small-title'
import * as echarts from 'echarts'
const tableConfigStatic = [
{ type: 'index', width: 100, name: i18n.t('index') },
{ name: i18n.t('inspect.inTotal'), prop: 'sumUp' },
{ name: i18n.t('inspect.outTotal'), prop: 'sumDown' },
{ name: i18n.t('inspect.checkTotal'), prop: 'sumCheck' },
{ name: i18n.t('inspect.rate'), prop: 'scrapRatio', filter: val => (val || val === 0 ? `${val}%` : '-') }
]
const tableConfigDynamic = [
{ type: 'index', width: 100, name: i18n.t('index') },
{ name: i18n.t('inspect.type'), prop: 'inspectionContent' },
/** dynamic */
{ name: i18n.t('inspect.typetotal'), prop: '' },
{ name: i18n.t('inspect.rate'), prop: '' }
]
const FakeChart = {
name: 'FakeChart',
props: {
categories: {
type: Array,
default: () => []
},
typeList: {
type: Array,
default: () => []
},
seriesData: {
type: Array,
default: () => []
}
},
data() {
return {
calcMaxHeight,
chart: null,
defaultOpts: {
title: {
text: i18n.t('inspect.typeCount')
},
tooltip: {},
legend: {
orient: 'vertical',
top: 10,
right: 20,
data: [
/** dynamic */
]
},
xAxis: {
data: [
/** dynamic */
]
},
yAxis: {},
series: [
// dynamic
// {
// name: '销售',
// type: 'bar',
// data: [23, 42, 12, 4, 3]
// }
]
}
}
},
watch: {
categories: {
handler: function(val, oldVal) {
if (val && val !== oldVal) {
this.defaultOpts.xAxis.data.push(...val)
}
},
immediate: true
},
typeList: {
handler: function(val, oldVal) {
if (val && val !== oldVal) {
this.defaultOpts.legend.data.push(...val)
}
},
immediate: true
},
seriesData: {
handler: function(val, oldVal) {
if (val && val !== oldVal) {
this.defaultOpts.series.push(...val)
}
},
immediate: true
},
defaultOpts: {
handler: function(val) {
console.log('defaullt opts change: ', val)
this.setOptions()
},
immediate: true,
deep: true
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
this.setOptions()
})
},
methods: {
initChart() {
if (!this.chart) {
this.chart = echarts.init(document.getElementById('bar-chart'))
}
},
setOptions(opts) {
/** prop options */
if (opts) {
}
if (this.chart) this.chart.setOption(this.defaultOpts)
}
},
render: function(h) {
return h('div', { attrs: { id: 'bar-chart' }, style: { background: '#eee', width: '100%', height: '300px', padding: '8px' } }, '')
}
}
const dict = [i18n.t('table2'), i18n.t('graph')]
export default {
name: 'QualityInspectionCurrent',
components: { BaseTable, SmallTitle, FakeChart },
data() {
return {
tableConfigStatic,
tableConfigDynamic,
dataListStatic: [],
dataListDynamic: [],
dict,
dataType: dict[0], // 表格 | 图形
showGraph: false,
datetime: [],
quickOptions: {
shortcuts: [
{
text: i18n.t('today'),
onClick(picker) {
const baseTime = moment().set({ hour: 0, minute: 0, second: 0, millisecond: 0 })
const startTime = baseTime.format('yyyy-MM-DDTHH:mm:ss')
const endTime = baseTime.set({ hour: 23, minute: 59, second: 59, millisecond: 999 }).format('yyyy-MM-DDTHH:mm:ss')
picker.$emit('pick', [startTime, endTime])
}
}
]
},
echartCategories: null,
echartCheckTypes: []
}
},
mounted() {
this.getDataList()
},
methods: {
handleOperations() {},
handleDataTypeChange(value) {
this.showGraph = value === dict[0] ? false : true
},
getDataList() {
this.showGraph = false
this.dataType = i18n.t('table2')
this.echartCategories = null
this.echartCheckTypes.splice(0)
/** 设置默认日期 */
const startTime =
this.datetime[0] ||
moment()
.set({ hour: 0, minute: 0, second: 0 })
.format('yyyy-MM-DDTHH:mm:ss')
const endTime =
this.datetime[1] ||
moment()
.set({ hour: 23, minute: 59, second: 59 })
.format('yyyy-MM-DDTHH:mm:ss')
/** [1] 获取上下片数据 */
this.fetchList('sx', startTime, endTime).then(({ data: res }) => {
console.log('sx: ', res)
this.dataListStatic = res.data || []
})
/** [2] 获取产线检测类型 */
this.fetchList('pl', startTime, endTime).then(({ data: res }) => {
console.log('pl: ', res)
/** TODO: 解析 nameData */
this.parseTableProps(res.data.nameData)
this.dataListDynamic = this.parseDynamicData(res.data.data) || []
this.buildGraphData()
})
},
parseTableProps(nameData) {
const subProps = []
const labelNameMap = new Map()
if (nameData.length) {
/** 处理 nameData */
nameData.forEach(item => {
if (!labelNameMap.get(item.name)) {
labelNameMap.set(item.name, 1)
subProps.push({ name: item.name, prop: item.name })
}
})
}
this.tableConfigDynamic = [
{ type: 'index', width: 100, name: i18n.t('index') },
{ name: i18n.t('inspect.type'), prop: 'inspectionContent' },
...subProps,
{ name: i18n.t('inspect.typetotal'), prop: 'sumInput' },
{ name: i18n.t('inspect.rate'), prop: 'scrapRatio', filter: val => (val || val === 0 ? `${val}%` : '-') }
]
/** echarts related */
this.echartCategories = subProps.map(item => item.name)
},
parseDynamicData(data) {
this.echartCheckTypes.splice(0)
return data.map(item => {
/** echarts related */
this.echartCheckTypes.push(item.inspectionContent)
if (item.data.length) {
/** 解析子数组 */
item.data.forEach(subitem => {
item[subitem.dynamicName] = subitem.dynamicValue
})
}
return item
})
},
buildGraphData() {
/** 构造 echart 需要的数据 */
const result = []
this.echartCheckTypes.forEach(ect => {
result.push({ name: ect, type: 'bar', data: [] })
})
this.dataListDynamic.forEach((inspection, index) => {
console.log('inspection: ', inspection)
this.echartCategories.forEach(cate => {
if (cate in inspection) {
result[index].data.push(inspection[cate])
} else {
result[index].data.push('0')
}
})
})
this.echartsData = result
// [
// { name: '11', type: 'bar', data: [/**产线1*/ 2, /**产线2*/ 3] },
// { name: '222', type: 'bar', data: [1, 2, 3] }
// ]
console.log('echarts data: ', this.echartsData)
},
fetchList(type, startTime, endTime) {
switch (type) {
case 'sx':
return this.$http({
url: this.$http.adornUrl('/monitoring/qualityInspectionRecord/pageCountRecordNow'),
method: 'POST',
data: {
startTime,
endTime
}
}).catch(err => {
console.error(err)
})
case 'pl':
return this.$http({
url: this.$http.adornUrl('/monitoring/qualityInspectionRecord/qualityInspectionRecordsDet'),
method: 'POST',
data: {
startTime,
endTime
}
}).catch(err => {
console.error(err)
})
}
}
}
}
</script>
<style scoped>
.base-container {
min-height: 60vh;
background: #fff;
padding: 12px;
}
</style>

203
src/views/modules/monitoring/qualityInspectionDet.vue Normal file
View File

@ -0,0 +1,203 @@
<template>
<div class="mod-config">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item>
<el-input v-model="dataForm.key" :placeholder="$t('inspect.det')" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button @click="getDataList()">{{ $t('query') }}</el-button>
<el-button v-if="$hasPermission('monitoring:qualityinspectiondet:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
</el-form-item>
</el-form>
<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" @operate-event="handleOperations" @refreshDataList="getDataList" />
<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="addOrUpdateVisible = false" />
</div>
</template>
<script>
import { calcMaxHeight } from '@/utils'
import { timeFilter } from '@/utils/filters'
import AddOrUpdate from '@/components/base-dialog/addOrUpdate'
// import AddOrUpdate from './qualityInspectionDet-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: 'typeName', name: i18n.t('inspect.type') },
{ prop: 'content', name: i18n.t('inspect.det') },
{ prop: 'code', name: i18n.t('inspect.code') },
{ 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',
infoUrl: '/monitoring/qualityInspectionDet',
fields: [
{ name: 'typeId', label: i18n.t('inspect.type'), type: 'select', options: [] },
{ name: 'content', label: i18n.t('inspect.det') },
{ name: 'code', label: i18n.t('inspect.detcode'), api: '/monitoring/qualityInspectionDet/getCode' },
'remark'
],
operations: [
{ name: 'cancel', showAlways: true },
{ name: 'save', url: '/monitoring/qualityInspectionDet', permission: 'monitoring:qualityinspectiondet:save', showOnEdit: false },
{ name: 'update', url: '/monitoring/qualityInspectionDet', permission: 'monitoring:qualityinspectiondet:update', showOnEdit: true }
]
}
export default {
data() {
return {
calcMaxHeight,
addOrUpdateConfigs,
tableConfigs,
dataForm: {
key: ''
},
dataList: [],
pageIndex: 1,
pageSize: 10,
totalPage: 0,
dataListLoading: false,
dataListSelections: [],
addOrUpdateVisible: false
}
},
components: {
AddOrUpdate,
BaseTable
},
activated() {
this.getInspectionTypeList()
this.getDataList()
},
methods: {
// 获取产检测类型列表
getInspectionTypeList() {
this.$http({
url: this.$http.adornUrl('/monitoring/qualityInspectionType/page'),
method: 'get',
params: this.$http.adornParams({
limit: 999,
page: 1
})
}).then(({ data: res }) => {
if (res && res.code === 0) {
this.addOrUpdateConfigs.fields.forEach(item => {
if (item.name === 'typeId') item.options = res.data.list.map(item => ({ label: item.name, value: item.id }))
})
} else {
this.addOrUpdateConfigs.fields.forEach(item => {
if (item.name === 'typeId') item.options.splice(0)
})
}
})
},
// 获取数据列表
getDataList() {
this.addOrUpdateVisible = false
this.dataListLoading = true
this.$http({
url: this.$http.adornUrl('/monitoring/qualityInspectionDet/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 '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/qualityInspectionDet'),
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>

281
src/views/modules/monitoring/qualityInspectionRecord.vue Normal file
View File

@ -0,0 +1,281 @@
<template>
<div class="mod-config">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<!-- <el-form-item>
<el-input v-model="dataForm.key" :placeholder="$t('parameter')" clearable></el-input>
</el-form-item> -->
<el-form-item>
<el-button @click="getDataList()">{{ $t('query') }}</el-button>
<el-button v-if="$hasPermission('monitoring:qualityinspectionrecord:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
</el-form-item>
</el-form>
<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" @operate-event="handleOperations" @refreshDataList="getDataList" />
<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="addOrUpdateVisible = false"
@select-change="handleSelectChange"
/>
</div>
</template>
<script>
import { calcMaxHeight } from '@/utils'
import { timeFilter } from '@/utils/filters'
import AddOrUpdate from '@/components/base-dialog/addOrUpdate'
// import AddOrUpdate from './qualityInspectionRecord-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: 'inspectionDetContent',
name: i18n.t('inspect.det')
},
{ prop: 'checkTime', name: i18n.t('inspect.time'), filter: timeFilter },
{ prop: 'productionId', name: i18n.t('pl.id') },
{ prop: 'sectionId', name: i18n.t('ws.id') },
{ prop: 'checkPerson', name: i18n.t('inspect.people') },
{ prop: 'source', name: i18n.t('source'), filter: val => ({ 1: i18n.t('manual'), 2: i18n.t('auto') }[val]) },
{ prop: 'explainText', name: i18n.t('desc') },
{ 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',
infoUrl: '/monitoring/qualityInspectionRecord',
fields: [
{ name: 'checkTime', label: i18n.t('inspect.time'), type: 'date', props: { style: 'width: 100%', type: 'datetime' }, placeholder: i18n.t('hints.checktime') },
{ name: 'productionId', label: i18n.t('pl.title'), type: 'select', options: [] },
{ name: 'sectionId', label: i18n.t('ws.title'), type: 'select', options: [] },
{
name: 'source',
label: i18n.t('source'),
type: 'select',
options: [
{ value: 1, label: i18n.t('manual'), default: true },
{ value: 2, label: i18n.t('auto') }
]
},
{ name: 'inspectionDetId', label: i18n.t('inspect.det'), type: 'select', options: [] },
{ name: 'checkPerson', label: i18n.t('inspect.people') },
{ name: 'explainText', label: i18n.t('desc') },
'remark'
],
operations: [
{ name: 'cancel', showAlways: true },
{ name: 'save', url: '/monitoring/qualityInspectionRecord', permission: 'monitoring:qualityinspectionrecord:save', showOnEdit: false },
{ name: 'update', url: '/monitoring/qualityInspectionRecord', permission: 'monitoring:qualityinspectionrecord:update', showOnEdit: true }
]
}
export default {
data() {
return {
calcMaxHeight,
addOrUpdateConfigs,
tableConfigs,
dataForm: {
key: ''
},
dataList: [],
pageIndex: 1,
pageSize: 10,
totalPage: 0,
dataListLoading: false,
dataListSelections: [],
addOrUpdateVisible: false
}
},
components: {
AddOrUpdate,
BaseTable
},
activated() {
this.getDataList()
this.getInspectionDet()
this.getWorkSections()
this.getProductLines()
},
methods: {
// handle
async handleSelectChange({ name, id }) {
if (name === 'productionId') {
// 如果选择了产线，就依据此更新工单的选项
await this.getWorkSections(id)
}
},
// 获取检测内容
getInspectionDet() {
this.$http({
url: this.$http.adornUrl('/monitoring/qualityInspectionDet/page'),
method: 'get',
params: this.$http.adornParams({
page: this.pageIndex,
limit: this.pageSize,
key: this.dataForm.key
})
}).then(({ data: res }) => {
console.log('insdet:', res)
const insDetOpt = this.addOrUpdateConfigs.fields.find(item => item.name === 'inspectionDetId')
if (insDetOpt) {
insDetOpt.options = res.data.list.map(item => ({ value: item.id, label: item.content })) || []
}
})
},
// 获取产线
getProductLines() {
this.$http({
url: this.$http.adornUrl('/monitoring/productionLine/page'),
method: 'get',
params: this.$http.adornParams({
// page: this.pageIndex,
// limit: this.pageSize,
// key: this.dataForm.key
})
}).then(({ data: res }) => {
const plOpt = this.addOrUpdateConfigs.fields.find(item => item.name === 'productionId')
if (plOpt) {
plOpt.options = res.data.list.map(item => ({ value: item.id, label: item.name })) || []
}
})
},
// 获取工段
getWorkSections(lineId) {
this.$http({
url: this.$http.adornUrl('/monitoring/workshopSection/page'),
method: 'get',
params: lineId
? this.$http.adornParams({
// page: this.pageIndex,
// limit: this.pageSize,
// key: this.dataForm.key
lineId
})
: {}
}).then(({ data: res }) => {
if (this.addOrUpdateVisible) {
if (res.data.total === 0) {
this.$message.error(i18n.t('errors.nosection'))
} else {
this.$message.success(i18n.t('errors.numsection', { num: res.data.total }))
}
}
const wsOpt = this.addOrUpdateConfigs.fields.find(item => item.name === 'sectionId')
if (wsOpt) {
wsOpt.options = res.data.list.map(item => ({ value: item.id, label: item.name })) || []
}
})
},
// 获取数据列表
getDataList() {
this.addOrUpdateVisible = false
this.dataListLoading = true
this.$http({
url: this.$http.adornUrl('/monitoring/qualityInspectionRecord/page'),
method: 'get',
params: this.$http.adornParams({
page: this.pageIndex,
limit: this.pageSize,
key: this.dataForm.key
})
}).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.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/qualityInspectionRecord'),
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>

174
src/views/modules/monitoring/qualityInspectionType.vue Normal file
View File

@ -0,0 +1,174 @@
<template>
<div class="mod-config">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item>
<el-input v-model="dataForm.key" :placeholder="$t('inspect.typename')" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button @click="getDataList()">{{ $t('query') }}</el-button>
<el-button v-if="$hasPermission('monitoring:qualityinspectiontype:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
</el-form-item>
</el-form>
<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" @operate-event="handleOperations" @refreshDataList="getDataList" />
<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="addOrUpdateVisible = false" />
</div>
</template>
<script>
import AddOrUpdate from '@/components/base-dialog/addOrUpdate'
// import AddOrUpdate from './qualityInspectionType-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 = [
{
type: 'index',
name: i18n.t('index')
},
{ prop: 'createTime', name: i18n.t('createTime'), filter: timeFilter },
{ prop: 'name', name: i18n.t('inspect.typename') },
{ prop: 'code', name: i18n.t('inspect.typename') },
{ 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',
infoUrl: '/monitoring/qualityInspectionType',
fields: [{ name: 'name', label: i18n.t('inspect.type') }, { name: 'code', label: i18n.t('inspect.typename'), api: '/monitoring/qualityInspectionType/getCode' }, 'remark'],
operations: [
{ name: 'cancel', showAlways: true },
{ name: 'save', url: '/monitoring/qualityInspectionType', permission: 'monitoring:qualityinspectiontype:save', showOnEdit: false },
{ name: 'update', url: '/monitoring/qualityInspectionType', permission: 'monitoring:qualityinspectiontype:update', showOnEdit: true }
]
}
export default {
data() {
return {
calcMaxHeight,
addOrUpdateConfigs,
tableConfigs,
dataForm: {
key: ''
},
dataList: [],
pageIndex: 1,
pageSize: 10,
totalPage: 0,
dataListLoading: false,
dataListSelections: [],
addOrUpdateVisible: false
}
},
components: {
AddOrUpdate,
BaseTable
},
activated() {
this.getDataList()
},
methods: {
// 获取数据列表
getDataList() {
this.addOrUpdateVisible = false
this.dataListLoading = true
this.$http({
url: this.$http.adornUrl('/monitoring/qualityInspectionType/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 '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/qualityInspectionType'),
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>

203
src/views/modules/monitoring/realtimeEquipment.vue Normal file
View File

@ -0,0 +1,203 @@
<!--
* @Author: lb
* @Date: 2022-06-22 14:00:17
* @LastEditors: lb
* @LastEditTime: 2022-06-22 14:00:17
* @Description: 设备生产实时数据
-->
<template>
<div>
<div class="app-container">
<small-title :size="'md'">{{ $t('realtime.eq') }}</small-title>
<base-table v-if="loadTable" :table-head-configs="tableProps" :data="tableData.length ? tableData : []" :span-method="spanMethod" />
</div>
</div>
</template>
<script>
import i18n from '@/i18n'
import BaseTable from '@/components/base-table'
import SmallTitle from '@/components/small-title'
import moment from 'moment'
import { calcMaxHeight } from '@/utils'
import { timeFilter } from '@/utils/filters'
export default {
name: 'RealtimeDataOfEquipment',
components: { BaseTable, SmallTitle },
data() {
return {
calcMaxHeight,
loadTable: false,
tableProps: [{ label: 'default', prop: 'default' }],
stepOneArray: [],
tableData: [],
testData: null,
equipmentCount: {}, // 每个产线的设备数量记录
dynamicPropSet: false, // 是否设置过动态prop
listLoading: false,
rowNum: 0,
intervalId: null
}
},
created() {
this.clearData()
this.fetchList().then(({ data: res }) => {
this.testData = res.data.filter(item => !!item.equDet)
this.handleData()
})
this.intervalId = setInterval(() => {
this.$message({
type: 'warning',
duration: 1500,
onClose: () => {
this.clearData()
this.fetchList().then(({ data: res }) => {
this.testData = res.data.filter(item => !!item.equDet)
this.handleData()
})
}
})
}, 1000 * 60 * 5)
},
beforeDestroy() {
if (this.intervalId) clearInterval(this.intervalId)
},
methods: {
clearData() {
this.tableData.splice(0)
this.tableProps.splice(0)
this.stepOneArray.splice(0)
this.dynamicPropSet = false
this.rowNum = 0
this.testData = null
this.loadTable = false
this.equipmentCount = {}
this.setStaticTableProps()
},
handleData() {
this.expandDataStepOne()
this.expandDataStepTwo()
this.loadTable = true
},
fetchList() {
// 获取设备实时数据
return this.$http({
url: this.$http.adornUrl('/monitoring/productionMonitoring/equipmentProductionRealTimeData'),
method: 'post'
})
},
expandDataStepOne() {
// console.log('testdata: ', this.testData)
this.stepOneArray = this.testData.map(item => {
if (item.equDet) {
item.equDet.forEach((equipment, index) => {
equipment.lineName = item.lineName
})
}
return item.equDet
})
},
expandDataStepTwo() {
// 扩展服务器返回的数据第二阶段
this.rowNum = 0
this.stepOneArray.forEach(line => {
let avaliableEquipmentCount = 0
line.forEach(equipment => {
const newItem = {
equId: equipment.equId,
lineName: equipment.lineName,
equName: equipment.equName,
externalCode: equipment.externalCode,
totalProduction: equipment.totalProduction ?? '-'
}
if (equipment.det) {
avaliableEquipmentCount += 1
equipment.det.forEach(obj => {
if (!this.dynamicPropSet) {
if (obj.recordTime) {
// 如果 obj.recordTime 是有效的
this.tableProps.push({
label: moment(obj.recordTime).format('YYYY-MM-DD HH:mm:ss'),
children: [
{ prop: obj.recordTime + '-inputNum', label: i18n.t('realtime.in') },
{ prop: obj.recordTime + '-outputNum', label: i18n.t('realtime.out') },
{ prop: obj.recordTime + '-scrapNum', label: i18n.t('realtime.data') },
{ prop: obj.recordTime + '-scrapRate', label: i18n.t('realtime.rate') }
]
})
}
}
Object.defineProperty(newItem, obj.recordTime + '-inputNum', {
value: obj.inputNum ?? '-',
enumerable: true,
writable: true
})
Object.defineProperty(newItem, obj.recordTime + '-outputNum', {
value: obj.outputNum ?? '-',
enumerable: true,
writable: true
})
Object.defineProperty(newItem, obj.recordTime + '-scrapNum', {
value: obj.scrapNum ?? '-',
enumerable: true,
writable: true
})
Object.defineProperty(newItem, obj.recordTime + '-scrapRate', {
value: obj.scrapRate ?? '-',
enumerable: true,
writable: true
})
Object.defineProperty(newItem, 'recordTime', {
value: obj.recordTime,
enumerable: true,
writable: true
})
})
if (!this.dynamicPropSet) this.dynamicPropSet = true
this.tableData.push(newItem)
}
})
this.$set(this.equipmentCount, [this.rowNum], avaliableEquipmentCount)
this.rowNum += avaliableEquipmentCount
})
},
setStaticTableProps() {
// Step1: 设置静态的 table props
const staticTableProps = [
{ prop: 'lineName', label: i18n.t('pl.title'), fixed: true },
{ prop: 'equName', label: i18n.t('equipment'), fixed: true },
{ prop: 'totalProduction', label: i18n.t('realtime.total'), fixed: true }
]
this.tableProps = staticTableProps
},
spanMethod({ row, column, rowIndex, columnIndex }) {
// 设置合并行列的方式
if (columnIndex === 0) {
if (this.equipmentCount[rowIndex]) {
// 如果找到需要合并的行号
return {
rowspan: this.equipmentCount[rowIndex],
colspan: 1
}
} else {
return {
rowspan: 0,
colspan: 0
}
}
}
}
}
}
</script>

165
src/views/modules/monitoring/realtimeProductLine.vue Normal file
View File

@ -0,0 +1,165 @@
<!--
* @Author: lb
* @Date: 2022-06-22 14:00:17
* @LastEditors: lb
* @LastEditTime: 2022-06-22 14:00:17
* @Description: 产线生产实时数据
-->
<template>
<div>
<div class="app-container">
<small-title :size="'md'">{{ $t('realtime.pl') }}</small-title>
<base-table v-if="loadTable" :table-head-configs="tableProps" :data="tableData.length ? tableData : []" />
</div>
</div>
</template>
<script>
import i18n from '@/i18n'
import BaseTable from '@/components/base-table'
import SmallTitle from '@/components/small-title'
import moment from 'moment'
import { calcMaxHeight } from '@/utils'
import { timeFilter } from '@/utils/filters'
export default {
name: 'RealtimeDataOfLine',
components: { BaseTable, SmallTitle },
data() {
return {
calcMaxHeight,
loadTable: false,
dynamicPropSet: false,
tableProps: [{ label: 'default', prop: 'default' }],
tableData: [],
testData: null,
listLoading: false,
intervalId: null
}
},
mounted() {
this.clearData()
this.fetchList().then(({ data: res }) => {
// console.log('fetchlist:', res)
this.testData = res
this.handleData()
})
this.intervalId = setInterval(() => {
this.$message({
message: this.$t('module.factory.realtime.productLine.refresh'),
type: 'warning',
onClose: () => {
this.clearData()
this.fetchList().then(res => {
this.testData = res
this.handleData()
})
}
})
}, 1000 * 60 * 5)
},
beforeDestroy() {
if (this.intervalId) clearInterval(this.intervalId)
},
methods: {
fetchList() {
return this.$http({
url: this.$http.adornUrl('/monitoring/productionMonitoring/lineProductionRealTimeData'),
method: 'post'
})
},
clearData() {
this.dynamicPropSet = false
this.loadTable = false
this.testData = null
this.tableData.splice(0)
this.tableProps.splice(0)
this.setStaticTableProps()
},
handleData() {
this.expandDataStepOne()
// this.expandDataStepTwo()
if (this.tableData.length > 0) this.loadTable = true
else {
this.$message({
message: i18n.t('errors.nodata'),
type: 'info',
duration: 2000
})
}
},
expandDataStepOne() {
// 扩展服务器返回的数据第一阶段
// console.log('create new one')
this.tableData = this.testData.data.map(item => {
const newItem = {
lineName: item.lineName,
orderName: item.orderName,
productSize: item.productSize ?? '-'
}
if (item.det) {
item.det.forEach(obj => {
// Step2: 设置动态props
if (!this.dynamicPropSet) {
this.tableProps.push({
label: moment(obj.recordTime).format('YYYY-MM-DD HH:mm:ss'),
children: [
{ prop: obj.recordTime + '-inputNum', label: i18n.t('realtime.in') },
{ prop: obj.recordTime + '-outputNum', label: i18n.t('realtime.out') },
{ prop: obj.recordTime + '-passArea', label: i18n.t('realtime.goodrate') },
{ prop: obj.recordTime + '-scrapNum', label: i18n.t('realtime.num') },
{ prop: obj.recordTime + '-scrapRate', label: i18n.t('realtime.rate') }
]
})
}
Object.defineProperty(newItem, obj.recordTime + '-inputNum', {
value: obj.inputNum ?? '-',
enumerable: true,
writable: true
})
Object.defineProperty(newItem, obj.recordTime + '-outputNum', {
value: obj.outputNum ?? '-',
enumerable: true,
writable: true
})
Object.defineProperty(newItem, obj.recordTime + '-scrapNum', {
value: obj.scrapNum ?? '-',
enumerable: true,
writable: true
})
const scrapRate = obj.scrapRate ?? '-'
Object.defineProperty(newItem, obj.recordTime + '-scrapRate', {
value: scrapRate === '-' ? '-' : scrapRate * 100 + '%',
enumerable: true,
writable: true
})
Object.defineProperty(newItem, obj.recordTime + '-passArea', {
value: obj.passArea ?? '-',
enumerable: true,
writable: true
})
})
this.dynamicPropSet = true
return newItem
}
})
},
setStaticTableProps() {
// Step1: 设置静态的 table props
const staticTableProps = [{ prop: 'lineName', label: i18n.t('pl.title'), fixed: true }]
this.tableProps = staticTableProps
}
}
}
</script>

145
src/views/modules/monitoring/realtimeQualityInspection.vue Normal file
View File

@ -0,0 +1,145 @@
<template>
<div>
<div class="app-container">
<small-title :size="'md'">{{ $t('realtime.inspect') }}</small-title>
<base-table v-if="loadTable" :table-head-configs="tableProps" :data="tableData.length ? tableData : []" />
</div>
</div>
</template>
<script>
// @ts-nocheck
/* eslint-disable */
import i18n from '@/i18n'
import BaseTable from '@/components/base-table'
import SmallTitle from '@/components/small-title'
import moment from 'moment'
import { calcMaxHeight } from '@/utils'
import { timeFilter } from '@/utils/filters'
// tslint: disable
export default {
name: 'RealtimeDataOfTeam',
components: { BaseTable, SmallTitle },
data() {
return {
calcMaxHeight,
loadTable: false,
// dynamicPropSet: false,
tableProps: [{ label: 'default', prop: 'default' }],
tableData: [],
testData: null,
listLoading: false,
intervalId: null
}
},
mounted() {
this.clearData()
this.fetchList().then(({ data: res }) => {
this.testData = res
this.handleData()
})
this.intervalId = setInterval(() => {
this.clearData()
this.fetchList().then(res => {
this.testData = res
this.handleData()
})
}, 1000 * 60 * 5)
},
beforeDestroy() {
if (this.intervalId) clearInterval(this.intervalId)
},
methods: {
fetchList() {
// 获取质量数据
return this.$http({
url: this.$http.adornUrl('/monitoring/productionMonitoring/qualityInspectionRealTimeData'),
method: 'post'
})
},
clearData() {
this.loadTable = false
this.testData = null
this.tableData.splice(0)
this.tableProps.splice(0)
},
handleData() {
// console.log('testData ===> ', this.testData)
this.initProps()
// console.log('props ===> ', this.tableProps)
this.initData()
// console.log('datas ===> ', this.tableData)
this.loadTable = true
},
handleRow(data) {
// data: { data:[], checkType: '' }
const item = {}
item.checkType = data.checkType
data.data.forEach(timepoint => {
if (timepoint.children && timepoint.children.length) {
timepoint.children.forEach(line => {
// item[timepoint.dynamicValue + line.dynamicName] = line.dynamicValue
item[timepoint.dynamicName + line.dynamicName] = line.dynamicValue
})
}
})
return item
},
initData() {
this.tableData = this.testData.data.data.map(row => this.handleRow(row))
},
initProps() {
this.tableProps = this.handlePropsEntry(this.testData.data.nameData)
},
handlePropsEntry(nameData) {
const dynamicPropNames = []
const timeMap = {}
const parentNode = nameData.filter(item => item.tree === 1)
const childNode = nameData.filter(item => item.tree === 2)
const handleChild = function(prop) {
const time = parentNode.find(item => item.id === prop.parentId).name
// 填充 timeMap
timeMap[time] = timeMap[time] ? timeMap[time] : {}
timeMap[time][prop.name] = true
}
childNode.forEach(item => {
handleChild(item)
})
// 对键值排序（时间排序）
const sortedTime = Object.keys(timeMap).sort((a, b) => {
if (moment(a).isBefore(b)) return -1
else return 1
})
// 保存为 props
for (const key of sortedTime) {
const prop = { label: key, children: [] }
for (const subKey in timeMap[key]) {
prop.children.push({ label: subKey, prop: key + subKey })
}
dynamicPropNames.push(prop)
}
return [{ prop: 'checkType', label: i18n.t('inspect.type'), isFixed: true }, ...dynamicPropNames]
}
}
}
</script>

172
src/views/modules/monitoring/reportCategory.vue Normal file
View File

@ -0,0 +1,172 @@
<template>
<div class="mod-config">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item>
<el-input v-model="dataForm.name" :placeholder="$t('categoryName')" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button @click="getDataList()">{{ $t('query') }}</el-button>
<el-button v-if="$hasPermission('monitoring:reportsheetcategory:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
</el-form-item>
</el-form>
<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" @operate-event="handleOperations" @refreshDataList="getDataList" />
<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="addOrUpdateVisible = false" />
</div>
</template>
<script>
// import AddOrUpdate from './reportSheetCategory-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 { calcMaxHeight } from '@/utils'
import { timeFilter } from '@/utils/filters'
const tableConfigs = [
{
type: 'index',
name: i18n.t('index')
},
{ prop: 'createTime', name: i18n.t('createTime'), filter: timeFilter },
{ prop: 'name', name: i18n.t('categoryName') },
{ prop: 'operations', name: i18n.t('handle'), width: 180, subcomponent: TableOperateComponent, options: ['edit', 'delete'] }
]
const addOrUpdateConfigs = {
type: 'dialog',
infoUrl: '/monitoring/reportSheetCategory',
fields: [{ name: 'name', label: i18n.t('categoryName'), required: true, span: 24 }],
operations: [
{ name: 'cancel', url: true, showAlways: true },
{ name: 'save', url: '/monitoring/reportSheetCategory', permission: 'monitoring:reportsheetcategory:save', showOnEdit: false },
{ name: 'update', url: '/monitoring/reportSheetCategory', permission: 'monitoring:reportsheetcategory:update', showOnEdit: true }
]
}
export default {
data() {
return {
calcMaxHeight,
tableConfigs,
addOrUpdateConfigs,
dataForm: {
name: ''
},
dataList: [],
pageIndex: 1,
pageSize: 10,
totalPage: 0,
dataListLoading: false,
dataListSelections: [],
addOrUpdateVisible: false
}
},
components: {
AddOrUpdate,
BaseTable
},
activated() {
this.getDataList()
},
methods: {
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/reportSheetCategory/page'),
method: 'get',
params: this.$http.adornParams({
page: this.pageIndex,
limit: this.pageSize,
name: this.dataForm.name
})
}).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/reportSheetCategory'),
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>

43
src/views/modules/monitoring/reportDesign.vue Normal file
View File

@ -0,0 +1,43 @@
<template>
<div v-loading="loading" :class="$style.container">
<iframe id="zgboke" :class="$style.mainIframe" name="mainIframe" :src="url" frameborder="0" scrolling="auto" />
</div>
</template>
<script>
export default {
components: {},
props: {},
data() {
return {
loading: true,
// url: process.env.VUE_APP_REPORT_DESIGN_URL
// url: window.SITE_CONFIG['apiURL'] + this.$http.adornUrl('/ureport/designer')
// url: this.$http.adornUrl('/ureport/designer')
url: (process.env.NODE_ENV === 'production' ? '/api' : '/yd-monitor') + '/ureport/designer'
}
},
mounted() {
const vm = this
console.log(this.$route.query)
const { name } = this.$route.query
this.url += name ? '?_u=db:' + this.$route.query.name : ''
const ifream = document.getElementById('zgboke')
ifream.onload = function() {
vm.loading = false
}
},
methods: {}
}
</script>
<style lang="scss" module>
.container {
margin: 0px 16px 0 8px;
width: 98.5%;
height: calc(100vh - 180px);
.mainIframe {
width: 100%;
height: 100%;
}
}
</style>

265
src/views/modules/monitoring/reportDetail.vue Normal file
View File

@ -0,0 +1,265 @@
<template>
<div class="mod-config">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item>
<el-input v-model="dataForm.name" :placeholder="$t('report.name')" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button @click="getDataList()">{{ $t('query') }}</el-button>
<!-- <el-button v-if="$hasPermission('')" type="primary" @click="addOrUpdateHandle()">新增(跳到设计)</el-button> -->
<el-button v-if="$hasPermission('monitoring:reportsheet:save')" type="primary" @click="handleAdd()">{{ $t('add') }}</el-button>
</el-form-item>
</el-form>
<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="500" @operate-event="handleOperations" @refreshDataList="getDataList" />
<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="addOrUpdateVisible = false" />
</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 axios from '@/utils/request'
const CategoryList = {
name: 'CategoryList',
props: {
injectData: {
type: Object,
required: true,
default: () => ({})
}
},
data() {
return { calcMaxHeight, pickedId: null }
},
mounted() {
console.log(this.injectData)
this.pickedId = this.injectData[this.injectData.head.prop]
},
methods: {
handleChange(id) {
this.pickedId = id
this.$emit('emit-data', {
type: 'change-category',
data: { id: this.injectData.id, fileName: this.injectData.fileName, name: this.injectData.name, url: this.injectData.url, categoryId: id }
})
}
},
render: function(h) {
const childOptions = []
this.injectData.head.options?.forEach(item => {
console.log('item', item.value)
childOptions.push(h('el-option', { props: { label: item.label, value: item.value } }, null))
})
return h('el-select', { props: { value: this.pickedId }, on: { change: this.handleChange } }, childOptions)
}
}
const addOrUpdateConfigs = {
type: 'dialog',
infoUrl: '/monitoring/reportSheet',
fields: [{ name: 'fileName', label: i18n.t('report.name'), required: true, span: 24 }],
operations: [
{ name: 'cancel', url: true, showAlways: true },
{ name: 'save', url: '/monitoring/reportSheet', permission: 'monitoring:reportsheet:save', showOnEdit: false },
{ name: 'update', url: '/monitoring/reportSheet', permission: 'monitoring:reportsheet:update', showOnEdit: true }
]
}
export default {
data() {
return {
addOrUpdateConfigs,
tableConfigs: [],
dataForm: {
name: ''
},
dataList: [],
pageIndex: 1,
pageSize: 10,
totalPage: 0,
dataListLoading: false,
dataListSelections: [],
addOrUpdateVisible: false
}
},
components: {
AddOrUpdate,
BaseTable
},
activated() {
this.dataList.splice(0)
this.getAllCategories()
this.getDataList()
},
computed: {},
methods: {
getAllCategories() {
axios.get(axios.adornUrl('/monitoring/reportSheetCategory/page')).then(({ data: res }) => {
if (res.data && res.data.list) {
const categories = res.data.list.map(item => ({ label: item.name, value: item.id }))
this.tableConfigs = [
{ type: 'index', width: 100, name: i18n.t('index') },
{ prop: 'createTime', name: i18n.t('createTime'), filter: timeFilter, width: 200 },
{ prop: 'fileName', name: i18n.t('report.name') },
{ prop: 'category', name: i18n.t('report.type'), subcomponent: CategoryList, options: categories },
{
prop: 'operations',
name: i18n.t('handle'),
fixed: 'right',
width: 180,
subcomponent: TableOperateComponent,
options: [{ name: 'preview', emitField: 'fileName' }, { name: 'design', emitField: 'name' }, 'edit', 'delete']
}
]
}
})
},
handleOperations({ type, data }) {
console.log('operation data: ', data)
let id = data
switch (type) {
case 'change-category':
return this.updateCategory(data)
case 'edit':
return this.addOrUpdateHandle(id)
case 'delete':
return this.deleteHandle(id)
case 'design':
return this.$router.push({
name: 'monitoring-reportDesign',
query: {
// data 的数据是 emitField 的值
name: data
}
})
case 'preview':
return this.$router.push({
name: 'monitoring-reportPreview',
query: {
name: data
}
})
}
},
updateCategory({ id, fileName, categoryId }) {
this.$http({
url: this.$http.adornUrl('/monitoring/reportSheet'),
method: 'put',
data: {
id,
fileName,
category: categoryId
}
}).then(({ data: res }) => {
this.$message.success(i18n.t('success'))
})
},
// 获取数据列表
getDataList() {
this.dataListLoading = true
const queries = {
page: this.pageIndex,
limit: this.pageSize,
name: this.dataForm.name
}
if (this.$route.query.category) {
queries['category'] = this.$route.query.category
}
this.$http({
url: this.$http.adornUrl('/monitoring/reportSheet/page'),
method: 'get',
params: this.$http.adornParams(queries)
}).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
},
// 新增 - 跳转到设计
handleAdd() {
this.$router.push({
name: 'monitoring-reportDesign'
})
},
addOrUpdateHandle(id) {
console.log('edit:', 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>

135
src/views/modules/monitoring/reportList.vue Normal file
View File

@ -0,0 +1,135 @@
<template>
<div class="container">
<el-row class="sort-box" :gutter="20">
<el-col class="sort-item" :span="4" @click.native="handleClick('')">
<div class="sort-item-box">
<div class="sort-item-box-top">
<!-- <p>{{ $t('module.report.reportSort.all') }}</p> -->
<p>{{ $t('all') }}</p>
</div>
<div class="sort-item-box-bottom">{{ allNum }} {{ allNum > 1 ? 'Reports' : 'Report' }}</div>
</div>
</el-col>
<el-col v-for="item in dataList" :key="item.id" class="sort-item" @click.native="handleClick(item.id)">
<div class="sort-item-box">
<div class="sort-item-box-top">
<p>{{ item.name }}</p>
</div>
<div class="sort-item-box-bottom">{{ item.quantity }} {{ item.quantity > 1 ? 'Reports' : 'Report' }}</div>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data() {
return { dataList: [], pageIndex: 1, pageSize: 10, totalPage: 0, allNum: 0 }
},
created() {
this.getDataList()
},
methods: {
// get list
getDataList() {
this.$http({
url: this.$http.adornUrl('/monitoring/reportSheetCategory/list'),
method: 'get',
params: {}
}).then(({ data: res }) => {
this.allNum = 0
if (res.data) {
this.dataList = res.data
res.data.forEach(item => {
this.allNum += item.quantity
})
} else this.dataList.splice(0)
})
},
handleClick(id) {
this.$router.push({
name: 'monitoring-reportDetail',
query: {
category: id
}
})
}
}
}
</script>
<style lang="scss">
.container {
padding: 20px;
.sort-box {
.sort-item {
height: 400px;
width: 280px;
margin-bottom: 20px;
.sort-item-box {
width: 100%;
height: 400px;
background: #faefc2;
border-radius: 10px;
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.5);
cursor: pointer;
position: relative;
overflow: hidden;
.sort-item-box-top {
margin: 0 10%;
width: 80%;
height: 199px;
border-bottom: 1px solid #e3d47d;
color: #b3a995;
position: relative;
p {
width: 100%;
position: absolute;
bottom: 0px;
line-height: 50px;
font-size: 24px;
letter-spacing: 5px;
text-align: center;
}
}
.sort-item-box-bottom {
width: 100%;
height: 200px;
line-height: 200px;
font-size: 24px;
font-weight: bold;
text-align: center;
letter-spacing: 5px;
color: #6e7680;
}
}
.sort-item-box::before {
content: '';
position: absolute;
right: 0;
width: 4px;
height: 400px;
background: #f8e69b;
}
.sort-item-box::after {
content: '';
position: absolute;
right: 0;
top: 70px;
width: 18px;
height: 60px;
background: #f8e69b;
border-radius: 5px;
}
.sort-item-box:hover {
transition: border linear 0.2s, box-shadow linear 0.2s;
border-color: rgba(141, 39, 142, 0.75);
box-shadow: 0 0 5px rgba(111, 1, 32, 3);
// border: 2px solid #fff;
}
}
}
}
</style>

72
src/views/modules/monitoring/reportPreview.vue Normal file
View File

@ -0,0 +1,72 @@
<!--
* @Author: gtz
* @Date: 2021-03-07 18:39:03
* @LastEditors: gtz
* @LastEditTime: 2022-02-24 16:35:51
* @Description: file content
-->
<template>
<div v-loading="loading" :class="$style.container">
<small-title :size="'md'" style="margin-bottom: 10px">{{ $t('report.name') + ': ' + $route.query.name }}</small-title>
<iframe id="reportView" :class="$style.mainIframe" name="mainIframe" :src="url" frameborder="0" scrolling="auto" />
</div>
</template>
<script>
import SmallTitle from '@/components/small-title'
export default {
components: { SmallTitle },
props: {},
data() {
return {
loading: true,
// url: process.env.VUE_APP_REPORT_VIEW_URL
// url: window.SITE_CONFIG['apiURL'] + this.$http.adornUrl('/ureport/preview')
url: (process.env.NODE_ENV === 'production' ? '/api' : '/yd-monitor') + '/ureport/preview'
}
},
mounted() {
const vm = this
console.log(this.$route.query)
this.url += '?_u=db:' + this.$route.query.name + '.ureport.xml'
// if (this.$route.query.params) {
// const params = JSON.parse(this.$route.query.params)
// params.map(item => {
// this.url += '&' + item.key + '=' + item.value
// })
// }
if (this.$route.query.substrateId) {
this.url += '&substrateId=' + this.$route.query.substrateId
}
if (this.$route.query.equipmentId) {
this.url += '&equipmentId=' + this.$route.query.equipmentId
}
if (this.$route.query.dataId) {
this.url += '&dataId=' + this.$route.query.dataId
}
if (this.$route.query.workOrderNo) {
this.url += '&workOrderNo=' + this.$route.query.workOrderNo
}
if (this.$route.query.id) {
this.url += '&id=' + this.$route.query.id
}
const ifream = document.getElementById('reportView')
ifream.onload = function() {
vm.loading = false
}
},
methods: {}
}
</script>
<style lang="scss" module>
.container {
margin: 0px 16px 0 8px;
width: 98.5%;
height: calc(100vh - 180px);
.mainIframe {
width: 100%;
height: 100%;
}
}
</style>

191
src/views/modules/monitoring/reportSheet-add-or-update.vue Normal file
View File

@ -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="分类：关联report_sheet_category" prop="category">
<el-input v-model="dataForm.category" placeholder="分类：关联report_sheet_category"></el-input>
</el-form-item>
<el-form-item label="编码" prop="code">
<el-input v-model="dataForm.code" placeholder="编码"></el-input>
</el-form-item>
<el-form-item label="名称" prop="name">
<el-input v-model="dataForm.name" 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="url">
<el-input v-model="dataForm.url" 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="报表内容" prop="content">
<el-input v-model="dataForm.content" 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,
category: '',
code: '',
name: '',
fileName: '',
url: '',
description: '',
enabled: '',
remark: '',
valid: '',
creatorId: '',
creatorName: '',
createTime: '',
updaterId: '',
updaterName: '',
updateTime: '',
version: '',
content: ''
},
dataRule: {
category: [{ required: true, message: '分类：关联report_sheet_category不能为空', trigger: 'blur' }],
code: [{ required: true, message: '编码不能为空', trigger: 'blur' }],
name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
fileName: [{ required: true, message: '文件名称不能为空', trigger: 'blur' }],
url: [{ 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' }],
content: [{ 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/reportSheet/${this.dataForm.id}`),
method: 'get',
params: this.$http.adornParams()
}).then(({ data }) => {
if (data && data.code === 0) {
this.dataForm.category = data.reporsheet.category
this.dataForm.code = data.reporsheet.code
this.dataForm.name = data.reporsheet.name
this.dataForm.fileName = data.reporsheet.fileName
this.dataForm.url = data.reporsheet.url
this.dataForm.description = data.reporsheet.description
this.dataForm.enabled = data.reporsheet.enabled
this.dataForm.remark = data.reporsheet.remark
this.dataForm.valid = data.reporsheet.valid
this.dataForm.creatorId = data.reporsheet.creatorId
this.dataForm.creatorName = data.reporsheet.creatorName
this.dataForm.createTime = data.reporsheet.createTime
this.dataForm.updaterId = data.reporsheet.updaterId
this.dataForm.updaterName = data.reporsheet.updaterName
this.dataForm.updateTime = data.reporsheet.updateTime
this.dataForm.version = data.reporsheet.version
this.dataForm.content = data.reporsheet.content
}
})
}
})
},
// 表单提交
dataFormSubmit() {
this.$refs['dataForm'].validate(valid => {
if (valid) {
this.$http({
url: this.$http.adornUrl(`/monitoring/reportSheet/${!this.dataForm.id ? '' : this.dataForm.id}`),
method: this.dataForm.id ? 'put' : 'post',
data: this.$http.adornData({
id: this.dataForm.id || undefined,
category: this.dataForm.category,
code: this.dataForm.code,
name: this.dataForm.name,
fileName: this.dataForm.fileName,
url: this.dataForm.url,
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,
content: this.dataForm.content
})
}).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>

154
src/views/modules/monitoring/reportSheet.vue Normal file
View File

@ -0,0 +1,154 @@
<template>
<div class="mod-config">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item>
<el-input v-model="dataForm.key" :placeholder="$t('parameter')" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button @click="getDataList()">{{ $t('query') }}</el-button>
<el-button v-if="$hasPermission('monitoring:reporsheet:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
</el-form-item>
</el-form>
<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 { calcMaxHeight } from '@/utils'
import { timeFilter } from '@/utils/filters'
import AddOrUpdate from './reportSheet-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: 'createTime', name: i18n.t('createTime'), filter: timeFilter },
{ prop: 'name', name: i18n.t('report.name') },
{ prop: 'code', name: i18n.t('report.code') },
{ prop: 'category', name: i18n.t('report.type') },
{ prop: 'fileName', name: i18n.t('file.name') },
{ prop: 'url', name: i18n.t('report.lnk') },
{ prop: 'description', name: i18n.t('desc') },
{ prop: 'remark', name: i18n.t('remark') },
{ prop: 'content', name: i18n.t('report.det') },
{ prop: 'operations', name: i18n.t('handle'), fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['edit', 'delete'] }
]
export default {
data() {
return {
calcMaxHeight,
tableConfigs,
dataForm: {
key: ''
},
dataList: [],
pageIndex: 1,
pageSize: 10,
totalPage: 0,
dataListLoading: false,
dataListSelections: [],
addOrUpdateVisible: false
}
},
components: {
AddOrUpdate,
BaseTable
},
activated() {
this.getDataList()
},
methods: {
// 获取数据列表
getDataList() {
this.dataListLoading = true
this.$http({
url: this.$http.adornUrl('/monitoring/reportSheet/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/reportSheet'),
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>

170
src/views/modules/monitoring/reportSheetCategory-add-or-update.vue Normal file
View File

@ -0,0 +1,170 @@
<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="code">
<el-input v-model="dataForm.code" placeholder="编码"></el-input>
</el-form-item>
<el-form-item label="名称" prop="name">
<el-input v-model="dataForm.name" 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="外部编码，用于对照外部系统的编码" prop="externalCode">
<el-input v-model="dataForm.externalCode" placeholder="外部编码，用于对照外部系统的编码"></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>
<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,
code: '',
name: '',
description: '',
externalCode: '',
enabled: '',
remark: '',
valid: '',
creatorId: '',
creatorName: '',
createTime: '',
updaterId: '',
updaterName: '',
updateTime: '',
version: ''
},
dataRule: {
code: [{ required: true, message: '编码不能为空', trigger: 'blur' }],
name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
description: [{ required: true, message: '描述不能为空', trigger: 'blur' }],
externalCode: [{ 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' }]
}
}
},
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/reportSheetCategory/${this.dataForm.id}`),
method: 'get',
params: this.$http.adornParams()
}).then(({ data }) => {
if (data && data.code === 0) {
this.dataForm.code = data.reporsheecategory.code
this.dataForm.name = data.reporsheecategory.name
this.dataForm.description = data.reporsheecategory.description
this.dataForm.externalCode = data.reporsheecategory.externalCode
this.dataForm.enabled = data.reporsheecategory.enabled
this.dataForm.remark = data.reporsheecategory.remark
this.dataForm.valid = data.reporsheecategory.valid
this.dataForm.creatorId = data.reporsheecategory.creatorId
this.dataForm.creatorName = data.reporsheecategory.creatorName
this.dataForm.createTime = data.reporsheecategory.createTime
this.dataForm.updaterId = data.reporsheecategory.updaterId
this.dataForm.updaterName = data.reporsheecategory.updaterName
this.dataForm.updateTime = data.reporsheecategory.updateTime
this.dataForm.version = data.reporsheecategory.version
}
})
}
})
},
// 表单提交
dataFormSubmit() {
this.$refs['dataForm'].validate(valid => {
if (valid) {
this.$http({
url: this.$http.adornUrl(`/monitoring/reportSheetCategory/${!this.dataForm.id ? '' : this.dataForm.id}`),
method: this.dataForm.id ? 'put' : 'post',
data: this.$http.adornData({
id: this.dataForm.id || undefined,
code: this.dataForm.code,
name: this.dataForm.name,
description: this.dataForm.description,
externalCode: this.dataForm.externalCode,
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
})
}).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>

148
src/views/modules/monitoring/reportSheetCategory.vue Normal file
View File

@ -0,0 +1,148 @@
<template>
<div class="mod-config">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item>
<el-input v-model="dataForm.key" :placeholder="$t('parameter')" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button @click="getDataList()">{{ $t('query') }}</el-button>
<el-button v-if="$hasPermission('monitoring:reporsheecategory:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
</el-form-item>
</el-form>
<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" />
<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 './reportSheetCategory-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: 'createTime', name: i18n.t('createTime'), filter: timeFilter },
{ prop: 'name', name: i18n.t('categoryName') },
{ prop: 'code', name: i18n.t('categoryCode') },
{ prop: 'operations', name: i18n.t('handle'), fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['edit', 'delete'] }
]
export default {
data() {
return {
calcMaxHeight,
tableConfigs,
dataForm: {
key: ''
},
dataList: [],
pageIndex: 1,
pageSize: 10,
totalPage: 0,
dataListLoading: false,
dataListSelections: [],
addOrUpdateVisible: false
}
},
components: {
AddOrUpdate,
BaseTable
},
activated() {
this.getDataList()
},
methods: {
// 获取数据列表
getDataList() {
this.dataListLoading = true
this.$http({
url: this.$http.adornUrl('/monitoring/reportSheetCategory/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/reportSheetCategory'),
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>

163
src/views/modules/monitoring/sysFile-add-or-update.vue Normal file
View File

@ -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="文件类型编号" prop="typeCode">
<el-input v-model="dataForm.typeCode" placeholder="文件类型编号"></el-input>
</el-form-item>
<el-form-item label="文件编号" prop="fileCode">
<el-input v-model="dataForm.fileCode" 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="文件路径URL" prop="fileUrl">
<el-input v-model="dataForm.fileUrl" placeholder="文件路径URL"></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,
typeCode: '',
fileCode: '',
fileName: '',
fileUrl: '',
remark: '',
valid: '',
creatorId: '',
creatorName: '',
createTime: '',
updaterId: '',
updaterName: '',
updateTime: '',
version: ''
},
dataRule: {
typeCode: [{ required: true, message: '文件类型编号不能为空', trigger: 'blur' }],
fileCode: [{ required: true, message: '文件编号不能为空', trigger: 'blur' }],
fileName: [{ required: true, message: '文件名称不能为空', trigger: 'blur' }],
fileUrl: [{ required: true, message: '文件路径URL不能为空', 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/sysFile/${this.dataForm.id}`),
method: 'get',
params: this.$http.adornParams()
}).then(({ data }) => {
if (data && data.code === 0) {
this.dataForm.typeCode = data.sysFile.typeCode
this.dataForm.fileCode = data.sysFile.fileCode
this.dataForm.fileName = data.sysFile.fileName
this.dataForm.fileUrl = data.sysFile.fileUrl
this.dataForm.remark = data.sysFile.remark
this.dataForm.valid = data.sysFile.valid
this.dataForm.creatorId = data.sysFile.creatorId
this.dataForm.creatorName = data.sysFile.creatorName
this.dataForm.createTime = data.sysFile.createTime
this.dataForm.updaterId = data.sysFile.updaterId
this.dataForm.updaterName = data.sysFile.updaterName
this.dataForm.updateTime = data.sysFile.updateTime
this.dataForm.version = data.sysFile.version
}
})
}
})
},
// 表单提交
dataFormSubmit() {
this.$refs['dataForm'].validate(valid => {
if (valid) {
this.$http({
url: this.$http.adornUrl(`/monitoring/sysFile/${!this.dataForm.id ? '' : this.dataForm.id}`),
method: this.dataForm.id ? 'put' : 'post',
data: this.$http.adornData({
id: this.dataForm.id || undefined,
typeCode: this.dataForm.typeCode,
fileCode: this.dataForm.fileCode,
fileName: this.dataForm.fileName,
fileUrl: this.dataForm.fileUrl,
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>

149
src/views/modules/monitoring/sysFileType-add-or-update.vue Normal file
View File

@ -0,0 +1,149 @@
<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="typeCode">
<el-input v-model="dataForm.typeCode" placeholder="文件类型编号"></el-input>
</el-form-item>
<el-form-item label="文件类型名称" prop="typeName">
<el-input v-model="dataForm.typeName" 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,
typeCode: '',
typeName: '',
remark: '',
valid: '',
creatorId: '',
creatorName: '',
createTime: '',
updaterId: '',
updaterName: '',
updateTime: '',
version: ''
},
dataRule: {
typeCode: [{ required: true, message: '文件类型编号不能为空', trigger: 'blur' }],
typeName: [{ 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/sysFileType/${this.dataForm.id}`),
method: 'get',
params: this.$http.adornParams()
}).then(({ data }) => {
if (data && data.code === 0) {
this.dataForm.typeCode = data.sysFileType.typeCode
this.dataForm.typeName = data.sysFileType.typeName
this.dataForm.remark = data.sysFileType.remark
this.dataForm.valid = data.sysFileType.valid
this.dataForm.creatorId = data.sysFileType.creatorId
this.dataForm.creatorName = data.sysFileType.creatorName
this.dataForm.createTime = data.sysFileType.createTime
this.dataForm.updaterId = data.sysFileType.updaterId
this.dataForm.updaterName = data.sysFileType.updaterName
this.dataForm.updateTime = data.sysFileType.updateTime
this.dataForm.version = data.sysFileType.version
}
})
}
})
},
// 表单提交
dataFormSubmit() {
this.$refs['dataForm'].validate(valid => {
if (valid) {
this.$http({
url: this.$http.adornUrl(`/monitoring/sysFileType/${!this.dataForm.id ? '' : this.dataForm.id}`),
method: this.dataForm.id ? 'put' : 'post',
data: this.$http.adornData({
id: this.dataForm.id || undefined,
typeCode: this.dataForm.typeCode,
typeName: this.dataForm.typeName,
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>

159
src/views/modules/monitoring/sysfile.vue Normal file
View File

@ -0,0 +1,159 @@
<template>
<div class="mod-config">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item>
<el-input v-model="dataForm.key" :placeholder="$t('parameter')" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button @click="getDataList()">{{ $t('query') }}</el-button>
<el-button v-if="$hasPermission('monitoring:sysfile: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 { calcMaxHeight } from '@/utils'
import { timeFilter } from '@/utils/filters'
import AddOrUpdate from './sysFile-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: '主键，自增' },
{ prop: 'typeCode', name: '文件类型编号' },
{ prop: 'fileCode', name: '文件编号' },
{ prop: 'fileName', name: i18n.t('file.name') },
{ prop: 'fileUrl', name: '文件路径URL' },
{ 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 {
calcMaxHeight,
tableConfigs,
dataForm: {
key: ''
},
dataList: [],
pageIndex: 1,
pageSize: 10,
totalPage: 0,
dataListLoading: false,
dataListSelections: [],
addOrUpdateVisible: false
}
},
components: {
AddOrUpdate,
BaseTable
},
activated() {
this.getDataList()
},
methods: {
// 获取数据列表
getDataList() {
this.dataListLoading = true
this.$http({
url: this.$http.adornUrl('/monitoring/sysFile/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/sysFile'),
data: this.$http.adornData(ids, false)
}).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>

156
src/views/modules/monitoring/sysfileType.vue Normal file
View File

@ -0,0 +1,156 @@
<template>
<div class="mod-config">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item>
<el-input v-model="dataForm.key" :placeholder="$t('parameter')" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button @click="getDataList()">{{ $t('query') }}</el-button>
<el-button v-if="$hasPermission('monitoring:sysfiletype: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 './sysFileType-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: 'typeCode', name: '文件类型编号' },
{ prop: 'typeName', 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: 'operations', name: i18n.t('handle'), fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['edit', 'delete'] }
]
export default {
data() {
return {
calcMaxHeight,
tableConfigs,
dataForm: {
key: ''
},
dataList: [],
pageIndex: 1,
pageSize: 10,
totalPage: 0,
dataListLoading: false,
dataListSelections: [],
addOrUpdateVisible: false
}
},
components: {
AddOrUpdate,
BaseTable
},
activated() {
this.getDataList()
},
methods: {
// 获取数据列表
getDataList() {
this.dataListLoading = true
this.$http({
url: this.$http.adornUrl('/monitoring/sysFileType/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/sysFileType'),
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>

42
src/views/modules/monitoring/testMultiBaseTable.vue Normal file
View File

@ -0,0 +1,42 @@
<template>
<div style="background: #ccc; width: 800px; height: 800px;">
<base-table :table-head-configs="configs" :data="dataList" />
</div>
</template>
<script>
import i18n from '@/i18n'
import BaseTable from '@/components/base-table'
export default {
name: 'Test',
components: { BaseTable },
data() {
return {
configs: [
{ prop: 'createTime', name: i18n.t('createDate') },
{ prop: 'name', name: i18n.t('name') },
{
label: i18n.t('addr'),
children: [
{ prop: 'province', name: '省' },
{
// prop: 'city',
name: '市',
children: [
{ prop: 'county', name: '县' },
{ prop: 'downtown', name: '镇' }
]
}
]
},
{ prop: 'status', name: i18n.t('status'), filter: val => ['激活', '注销'][val] }
],
dataList: [
{ createTime: '2022-01-01', name: '奥特曼', province: '北京', city: '昌平', county: '怀宁', downtown: '石牌', status: 0 },
{ createTime: '2022-01-02', name: '盈江', province: '上海', city: '徐家汇', status: 1 }
]
}
}
}
</script>

200
src/views/modules/monitoring/workShopSection.vue Normal file
View File

@ -0,0 +1,200 @@
<template>
<div class="mod-config">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item>
<el-input v-model="dataForm.key" :placeholder="$t('ws.name')" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button @click="getDataList()">{{ $t('query') }}</el-button>
<el-button v-if="$hasPermission('monitoring:workshopsection:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
</el-form-item>
</el-form>
<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" @operate-event="handleOperations" @refreshDataList="getDataList" />
<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" @destory-dialog="addOrUpdateVisible = false" />
</div>
</template>
<script>
import { calcMaxHeight } from '@/utils'
import { timeFilter } from '@/utils/filters'
// import AddOrUpdate from '@/components/base-dialog/addOrUpdate'
import AddOrUpdate from './workshopSectionDialog.vue'
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('ws.name') },
{ prop: 'code', name: i18n.t('ws.code') },
{ prop: 'productionLineName', name: i18n.t('pl.title') },
{ 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',
infoUrl: '/monitoring/workshopSection',
fields: [
{ name: 'name', label: i18n.t('ws.name') },
{ name: 'code', label: i18n.t('ws.code'), api: '/monitoring/workshopSection/getCode' },
{ name: 'productionLineId', label: i18n.t('ws.belong'), type: 'select', options: [] },
'description',
'remark'
],
operations: [
{ name: 'reset', url: true, showAlways: true },
{ name: 'cancel', url: true, showAlways: true },
{ name: 'save', url: '/monitoring/workshopSection', permission: 'monitoring:workshopsection:save', showOnEdit: false },
{ name: 'update', url: '/monitoring/workshopSection', permission: 'monitoring:workshopsection:update', showOnEdit: true }
]
}
export default {
data() {
return {
calcMaxHeight,
addOrUpdateConfigs,
tableConfigs,
dataForm: {
key: ''
},
dataList: [],
plList: [],
pageIndex: 1,
pageSize: 10,
totalPage: 0,
dataListLoading: false,
dataListSelections: [],
addOrUpdateVisible: false
}
},
components: {
AddOrUpdate,
BaseTable
},
activated() {
this.getProductLine()
this.getDataList()
},
methods: {
// 获取产线列表
getProductLine() {
this.$http.get(this.$http.adornUrl('/monitoring/productionLine/list')).then(({ data: res }) => {
if (res && res.code === 0) {
this.addOrUpdateConfigs.fields.forEach(item => {
if (item.name === 'productionLineId') item.options = res.data.map(item => ({ label: item.name, value: item.id }))
})
} else {
this.addOrUpdateConfigs.fields.forEach(item => {
if (item.name === 'productionLineId') item.options.splice(0)
})
// this.plList.splice(0)
}
})
},
// 获取数据列表
getDataList() {
this.addOrUpdateVisible = false
this.dataListLoading = true
this.$http({
url: this.$http.adornUrl('/monitoring/workshopSection/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 '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/workshopSection'),
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>

149
src/views/modules/monitoring/workShopSectionEquipment.vue Normal file
View File

@ -0,0 +1,149 @@
<template>
<div class="mod-config">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item>
<el-input v-model="dataForm.key" :placeholder="$t('parameter')" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button @click="getDataList()">{{ $t('query') }}</el-button>
<el-button v-if="$hasPermission('monitoring:workshopsectionequipment:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
</el-form-item>
</el-form>
<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" />
<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 './workshopSectionEquipment-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: 'createTime', name: i18n.t('createTime'), filter: timeFilter },
{ prop: 'workshopSectionId', name: i18n.t('ws.id') },
{ prop: 'equipmentId', name: '设备ID' },
{ prop: 'sort', name: i18n.t('dept.sort') },
{ prop: 'remark', name: i18n.t('remark') },
{ prop: 'operations', name: i18n.t('handle'), fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['edit', 'delete'] }
]
export default {
data() {
return {
calcMaxHeight,
tableConfigs,
dataForm: {
key: ''
},
dataList: [],
pageIndex: 1,
pageSize: 10,
totalPage: 0,
dataListLoading: false,
dataListSelections: [],
addOrUpdateVisible: false
}
},
components: {
AddOrUpdate,
BaseTable
},
activated() {
this.getDataList()
},
methods: {
// 获取数据列表
getDataList() {
this.dataListLoading = true
this.$http({
url: this.$http.adornUrl('/monitoring/workshopSectionEquipment/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/workshopSectionEquipment'),
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>

317
src/views/modules/monitoring/workshopSectionDialog.vue Normal file
View File

@ -0,0 +1,317 @@
<template>
<el-dialog class="super-flexible-dialog" :title="isDetail ? $t('ws.detail') : !dataForm.id ? $t('add') : $t('ws.edit')" :visible.sync="visible">
<div style="max-height: 60vh; overflow-y: scroll; overflow-x: hidden;">
<el-form ref="dataForm" :model="dataForm" :rules="dataFormRules">
<el-row :gutter="20">
<el-col :span="12"
><el-form-item :label="$t('ws.name')" prop="name"> <el-input v-model="dataForm.name" :placeholder="$t('ws.name')" /> </el-form-item
></el-col>
<el-col :span="12"
><el-form-item :label="$t('ws.code')" prop="code"> <el-input v-model="dataForm.code" :placeholder="$t('ws.code')" /> </el-form-item
></el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12"
><el-form-item :label="$t('ws.belong')" prop="productionLineId">
<el-select v-model="dataForm.productionLineId" :placeholder="$t('ws.belong')">
<el-option v-for="line in lineList" :key="line.id" :value="line.id" :label="line.name" />
</el-select> </el-form-item
></el-col>
<el-col :span="12"
><el-form-item :label="$t('desc')" prop="description"> <el-input v-model="dataForm.description" :placeholder="$t('desc')" /> </el-form-item
></el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12"
><el-form-item :label="$t('remark')" prop="remark"> <el-input v-model="dataForm.remark" :placeholder="$t('remark')" /> </el-form-item
></el-col>
</el-row>
</el-form>
<section class="attr-form-section" v-if="dataForm.id">
<h3>
{{ $t('ws.eqbind') }}
<el-button type="text" v-if="!showAttrForm" @click="addEq">{{ $t('add') }}</el-button>
</h3>
<div class="table" v-if="!showAttrForm">
<base-table :data="eqList" :table-head-configs="tableProps" :max-height="calcMaxHeight(8)" @operate-event="handleOperations" @refreshDataList="getDataList" />
<el-pagination
@size-change="sizeChangeHandle"
@current-change="currentChangeHandle"
:current-page="page"
:page-sizes="[5, 10, 15, 20]"
:page-size="limit"
:total="eqTotal"
layout="total, sizes, prev, pager, next, jumper"
/>
</div>
<attr-form v-else ref="AttrFrom" :workshop-section-id="dataForm.id" @close-attr-form="showAttrForm = false" @refresh-list="handleRefreshList" />
</section>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="handleClick({ name: 'cancel' })">{{ $t('cancel') }}</el-button>
<el-button type="primary" v-if="dataForm.id" @click="handleClick({ name: 'update' })">{{ $t('update') }}</el-button>
<el-button type="success" v-else @click="handleClick({ name: 'save' })">{{ $t('save') }}</el-button>
</span>
</el-dialog>
</template>
<script>
import i18n from '@/i18n'
import BaseTable from '@/components/base-table'
import SmallTitle from '@/components/small-title'
import { pick } from 'lodash/object'
import TableOperateComponent from '@/components/base-table/components/operationComponent'
import AttrForm from './workshopSectionDialogAttrForm.vue'
import { calcMaxHeight } from '@/utils'
const tableProps = [
{
type: 'index',
name: i18n.t('index')
},
{ name: i18n.t('eq.name'), prop: 'equipmentName' },
{ name: i18n.t('dept.sort'), prop: 'sort' },
{
name: i18n.t('handle'),
prop: 'operations',
fixed: 'right',
width: 180,
subcomponent: TableOperateComponent,
options: ['edit', 'delete']
}
]
export default {
name: 'WorkshopDialog',
components: { BaseTable, SmallTitle, AttrForm },
data() {
return {
calcMaxHeight,
visible: false,
isDetail: false,
tableProps,
lineList: [],
eqList: [],
eqTotal: 0,
dataForm: {
id: null,
// 工段名称
name: '',
// 工段编码
code: '',
// 所属产线
productionLineId: null,
// 描述
description: '',
// 备注
remark: ''
},
limit: 5,
page: 1,
dataFormRules: {},
showAttrForm: false
}
},
mounted() {
this.getLineList()
},
methods: {
init(id) {
this.dataForm = {
id: null,
name: '',
code: '',
productionLineId: null,
description: '',
remark: ''
}
this.showAttrForm = false
this.dataForm.id = id
// this.isDetail = !!id
this.$nextTick(() => {
if (id) {
// 编辑
this.$http({
url: this.$http.adornUrl('/monitoring/workshopSection/' + this.dataForm.id),
method: 'get'
}).then(({ data: res }) => {
if (res.data) {
const { name, code, productionLineId, description, remark } = res.data
this.dataForm.name = name
this.dataForm.code = code
this.dataForm.productionLineId = productionLineId
this.dataForm.description = description
this.dataForm.remark = remark
}
})
// 获取list
this.getDataList()
} else {
this.getWsCode()
}
})
this.visible = true
},
getWsCode() {
this.$http({
url: this.$http.adornUrl('/monitoring/workshopSection/getCode'),
method: 'post'
}).then(({ data: res }) => {
if (res.data) {
this.dataForm.code = res.data
}
})
},
getLineList() {
this.$http({
url: this.$http.adornUrl('/monitoring/productionLine/list'),
method: 'get'
}).then(({ data: res }) => {
if (res.data) {
this.lineList = res.data
} else {
this.lineList.splice(0)
}
})
},
getDataList() {
// 获取设备关联表
this.$http({
url: this.$http.adornUrl('/monitoring/workshopSectionEquipment'),
method: 'get',
params: this.$http.adornParams({
limit: this.limit,
page: this.page,
id: this.dataForm.id
})
}).then(({ data: res }) => {
if (res.data && res.data.list) {
this.eqList = res.data.list
this.eqTotal = res.data.total
} else {
this.eqList.splice(0)
this.eqTotal = 0
}
})
},
// 每页数
sizeChangeHandle(val) {
this.limit = val
this.page = 1
this.getDataList()
},
// 当前页
currentChangeHandle(val) {
this.page = val
this.getDataList()
},
addEq() {
this.handleAddOrUpdate()
},
handleOperations({ type, data: id }) {
switch (type) {
case 'edit':
this.handleAddOrUpdate(id)
break
case 'delete':
this.handleDeleteEq(id)
break
}
},
handleDeleteEq(id) {
this.$confirm(i18n.t('prompt.sure'), i18n.t('prompt.title'), {
// this.$confirm(`确定删除 ${id} 吗?`, i18n.t('prompt.title'), {
confirmButtonText: i18n.t('confirm'),
cancelButtonText: i18n.t('cancel'),
type: 'warning'
}).then(() => {
this.$http({
url: this.$http.adornUrl('/monitoring/workshopSectionEquipment'),
method: 'delete',
data: [id]
}).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)
}
})
})
},
handleRefreshList() {
this.getDataList()
this.showAttrForm = false
},
handleAddOrUpdate(id) {
this.showAttrForm = true
if (id) {
this.$nextTick(() => {
this.$refs.AttrFrom.setInitialId(id)
})
}
},
handleClick({ name }) {
switch (name) {
case 'cancel':
this.visible = false
break
case 'update':
case 'save':
this.handleCreateOrUpdate()
break
}
},
handleCreateOrUpdate() {
this.$http({
url: this.$http.adornUrl('/monitoring/workshopSection'),
method: this.dataForm.id ? 'put' : 'post',
data: {
...this.dataForm
}
}).then(({ data: res }) => {
this.$message.success({
message: i18n.t('prompt.success'),
onClose: () => {
this.$emit('refreshDataList')
this.visible = false
}
})
})
}
}
}
</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>

126
src/views/modules/monitoring/workshopSectionDialogAttrForm.vue Normal file
View File

@ -0,0 +1,126 @@
<template>
<div class="" style="background: #eee; border-radius: 8px; padding: 24px;">
<el-row>
<el-form ref="dataForm" :model="dataForm" :rules="dataFormRules">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item :label="edit ? $t('ws.binded') : $t('ws.unbind')" prop="equipmentId">
<el-select v-if="!edit" clearable v-model="dataForm.equipmentId">
<el-option v-for="eq in eqList" :key="eq.id" :label="eq.name" :value="eq.id" />
</el-select>
<el-input v-else disabled v-model="bindedEquipmentName" /> </el-form-item
></el-col>
<el-col :span="12">
<el-form-item :label="$t('ws.sort')" prop="sort"> <el-input v-model="dataForm.sort" :placeholder="$t('ws.setorder')" clearable /> </el-form-item
></el-col>
</el-row>
</el-form>
</el-row>
<el-row style="text-align: right">
<el-button size="small" @click="handleCancel">{{ $t('cancel') }}</el-button>
<el-button size="small" type="success" @click="handleSave">{{ edit ? $t('update') : $t('ws.bind') }}</el-button>
</el-row>
</div>
</template>
<script>
import i18n from '../../../i18n'
export default {
name: 'AttrForm',
props: {
workshopSectionId: {
type: String,
required: true
}
},
data() {
return {
edit: false,
bindedEquipmentName: '',
dataForm: {
id: null,
sort: null,
equipmentId: null
},
dataFormRules: {
sort: [
{
type: 'integer',
message: i18n.t('hints.number'),
transform: val => Number(val),
trigger: 'blur'
}
]
},
eqList: []
}
},
mounted() {
this.edit = false
this.bindedEquipmentName = ''
this.getEqList()
},
methods: {
setInitialId(id) {
this.edit = true
// 获取信息，让用户修改排序
this.$http({
url: this.$http.adornUrl('/monitoring/workshopSectionEquipment/') + id,
method: 'get'
}).then(({ data: res }) => {
if (res.data) {
const { id, equipmentId, equipmentName, sort } = res.data
this.dataForm = { id, equipmentId, sort }
this.bindedEquipmentName = equipmentName
} else {
this.dataForm = { id: null, equipmentId: null, sort: null }
this.bindedEquipmentName = ''
}
})
},
getEqList() {
this.$http({
url: this.$http.adornUrl('/monitoring/equipment/noBindEqu'),
method: 'get'
}).then(({ data: res }) => {
if (res.data) {
this.eqList = res.data.map(item => ({ id: item.id, name: item.name }))
} else {
this.eqList.splice(0)
}
})
},
handleCancel() {
this.eqList.splice(0)
this.dataForm = {
id: null,
sort: null,
equipmentId: null
}
this.$emit('close-attr-form')
},
handleSave() {
this.$http({
url: this.$http.adornUrl('/monitoring/workshopSectionEquipment'),
method: this.edit ? 'put' : 'post',
data: {
...this.dataForm,
workshopSectionId: this.workshopSectionId
}
}).then(({ data: res }) => {
if (res.data) {
this.$message.success({
message: i18n.t('prompt.success'),
duration: 1500,
onClose: () => {
this.$emit('refresh-list')
this.handleCancel()
}
})
}
})
}
}
}
</script>

156
src/views/modules/monitoring/workshopSectionEquipment-add-or-update.vue Normal file
View File

@ -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="workshopSectionId">
<el-input v-model="dataForm.workshopSectionId" placeholder="工段ID"></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="sort">
<el-input v-model="dataForm.sort" 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,
workshopSectionId: '',
equipmentId: '',
sort: '',
remark: '',
valid: '',
creatorId: '',
creatorName: '',
createTime: '',
updaterId: '',
updaterName: '',
updateTime: '',
version: ''
},
dataRule: {
workshopSectionId: [{ required: true, message: '工段ID不能为空', trigger: 'blur' }],
equipmentId: [{ required: true, message: '设备ID不能为空', trigger: 'blur' }],
sort: [{ 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/workshopSectionEquipment/${this.dataForm.id}`),
method: 'get',
params: this.$http.adornParams()
}).then(({ data }) => {
if (data && data.code === 0) {
this.dataForm.workshopSectionId = data.workshopSectionEquipment.workshopSectionId
this.dataForm.equipmentId = data.workshopSectionEquipment.equipmentId
this.dataForm.sort = data.workshopSectionEquipment.sort
this.dataForm.remark = data.workshopSectionEquipment.remark
this.dataForm.valid = data.workshopSectionEquipment.valid
this.dataForm.creatorId = data.workshopSectionEquipment.creatorId
this.dataForm.creatorName = data.workshopSectionEquipment.creatorName
this.dataForm.createTime = data.workshopSectionEquipment.createTime
this.dataForm.updaterId = data.workshopSectionEquipment.updaterId
this.dataForm.updaterName = data.workshopSectionEquipment.updaterName
this.dataForm.updateTime = data.workshopSectionEquipment.updateTime
this.dataForm.version = data.workshopSectionEquipment.version
}
})
}
})
},
// 表单提交
dataFormSubmit() {
this.$refs['dataForm'].validate(valid => {
if (valid) {
this.$http({
url: this.$http.adornUrl(`/monitoring/workshopSectionEquipment/${!this.dataForm.id ? '' : this.dataForm.id}`),
method: this.dataForm.id ? 'put' : 'post',
data: this.$http.adornData({
id: this.dataForm.id || undefined,
workshopSectionId: this.dataForm.workshopSectionId,
equipmentId: this.dataForm.equipmentId,
sort: this.dataForm.sort,
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>

414
src/views/modules/oss/oss-config.vue
View File

@ -1,225 +1,205 @@
<template>
<el-dialog :visible.sync="visible" :title="$t('oss.config')" :close-on-click-modal="false" :close-on-press-escape="false">
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" label-width="120px">
<el-form-item :label="$t('oss.type')" size="mini">
<el-radio-group v-model="dataForm.type">
<el-radio :label="1">{{ $t('oss.type1') }}</el-radio>
<el-radio :label="2">{{ $t('oss.type2') }}</el-radio>
<el-radio :label="3">{{ $t('oss.type3') }}</el-radio>
</el-radio-group>
</el-form-item>
<template v-if="dataForm.type === 1">
<el-form-item size="mini">
<a href="https://s.qiniu.com/7Rfaym" target="_blank">免费申请(七牛)10GB储存空间</a>
</el-form-item>
<el-form-item prop="qiniuDomain" :label="$t('oss.qiniuDomain')">
<el-input v-model="dataForm.qiniuDomain" :placeholder="$t('oss.qiniuDomainTips')"></el-input>
</el-form-item>
<el-form-item prop="qiniuPrefix" :label="$t('oss.qiniuPrefix')">
<el-input v-model="dataForm.qiniuPrefix" :placeholder="$t('oss.qiniuPrefixTips')"></el-input>
</el-form-item>
<el-form-item prop="qiniuAccessKey" :label="$t('oss.qiniuAccessKey')">
<el-input v-model="dataForm.qiniuAccessKey" :placeholder="$t('oss.qiniuAccessKeyTips')"></el-input>
</el-form-item>
<el-form-item prop="qiniuSecretKey" :label="$t('oss.qiniuSecretKey')">
<el-input v-model="dataForm.qiniuSecretKey" :placeholder="$t('oss.qiniuSecretKeyTips')"></el-input>
</el-form-item>
<el-form-item prop="qiniuBucketName" :label="$t('oss.qiniuBucketName')">
<el-input v-model="dataForm.qiniuBucketName" :placeholder="$t('oss.qiniuBucketNameTips')"></el-input>
</el-form-item>
</template>
<template v-else-if="dataForm.type === 2">
<el-form-item size="mini">
<a href="https://www.aliyun.com/minisite/goods?userCode=y93lfwbg" target="_blank">免费领取阿里云优惠券</a>
</el-form-item>
<el-form-item prop="aliyunDomain" :label="$t('oss.aliyunDomain')">
<el-input v-model="dataForm.aliyunDomain" :placeholder="$t('oss.aliyunDomainTips')"></el-input>
</el-form-item>
<el-form-item prop="aliyunPrefix" :label="$t('oss.aliyunPrefix')">
<el-input v-model="dataForm.aliyunPrefix" :placeholder="$t('oss.aliyunPrefixTips')"></el-input>
</el-form-item>
<el-form-item prop="aliyunEndPoint" :label="$t('oss.aliyunEndPoint')">
<el-input v-model="dataForm.aliyunEndPoint" :placeholder="$t('oss.aliyunEndPointTips')"></el-input>
</el-form-item>
<el-form-item prop="aliyunAccessKeyId" :label="$t('oss.aliyunAccessKeyId')">
<el-input v-model="dataForm.aliyunAccessKeyId" :placeholder="$t('oss.aliyunAccessKeyIdTips')"></el-input>
</el-form-item>
<el-form-item prop="aliyunAccessKeySecret" :label="$t('oss.aliyunAccessKeySecret')">
<el-input v-model="dataForm.aliyunAccessKeySecret" :placeholder="$t('oss.aliyunAccessKeySecretTips')"></el-input>
</el-form-item>
<el-form-item prop="aliyunBucketName" :label="$t('oss.aliyunBucketName')">
<el-input v-model="dataForm.aliyunBucketName" :placeholder="$t('oss.aliyunBucketNameTips')"></el-input>
</el-form-item>
</template>
<template v-else-if="dataForm.type === 3">
<el-form-item size="mini">
<a href="https://curl.qcloud.com/zt3xdYbZ" target="_blank">免费领取腾讯云优惠券</a>
</el-form-item>
<el-form-item prop="qcloudDomain" :label="$t('oss.qcloudDomain')">
<el-input v-model="dataForm.qcloudDomain" :placeholder="$t('oss.qcloudDomainTips')"></el-input>
</el-form-item>
<el-form-item prop="qcloudPrefix" :label="$t('oss.qcloudPrefix')">
<el-input v-model="dataForm.qcloudPrefix" :placeholder="$t('oss.qcloudPrefixTips')"></el-input>
</el-form-item>
<el-form-item prop="qcloudAppId" :label="$t('oss.qcloudAppId')">
<el-input v-model="dataForm.qcloudAppId" :placeholder="$t('oss.qcloudAppIdTips')"></el-input>
</el-form-item>
<el-form-item prop="qcloudSecretId" :label="$t('oss.qcloudSecretId')">
<el-input v-model="dataForm.qcloudSecretId" :placeholder="$t('oss.qcloudSecretIdTips')"></el-input>
</el-form-item>
<el-form-item prop="qcloudSecretKey" :label="$t('oss.qcloudSecretKey')">
<el-input v-model="dataForm.qcloudSecretKey" :placeholder="$t('oss.qcloudSecretKeyTips')"></el-input>
</el-form-item>
<el-form-item prop="qcloudBucketName" :label="$t('oss.qcloudBucketName')">
<el-input v-model="dataForm.qcloudBucketName" :placeholder="$t('oss.qcloudBucketNameTips')"></el-input>
</el-form-item>
<el-form-item prop="qcloudRegion" :label="$t('oss.qcloudRegion')">
<el-select v-model="dataForm.qcloudRegion" clearable :placeholder="$t('oss.qcloudRegionTips')" class="w-percent-100">
<el-option value="ap-beijing-1" :label="$t('oss.qcloudRegionBeijing1')"></el-option>
<el-option value="ap-beijing" :label="$t('oss.qcloudRegionBeijing')"></el-option>
<el-option value="ap-shanghai" :label="$t('oss.qcloudRegionShanghai')"></el-option>
<el-option value="ap-guangzhou" :label="$t('oss.qcloudRegionGuangzhou')"></el-option>
<el-option value="ap-chengdu" :label="$t('oss.qcloudRegionChengdu')"></el-option>
<el-option value="ap-chongqing" :label="$t('oss.qcloudRegionChongqing')"></el-option>
<el-option value="ap-singapore" :label="$t('oss.qcloudRegionSingapore')"></el-option>
<el-option value="ap-hongkong" :label="$t('oss.qcloudRegionHongkong')"></el-option>
<el-option value="na-toronto" :label="$t('oss.qcloudRegionToronto')"></el-option>
<el-option value="eu-frankfurt" :label="$t('oss.qcloudRegionFrankfurt')"></el-option>
</el-select>
</el-form-item>
</template>
</el-form>
<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>
<el-dialog :visible.sync="visible" :title="$t('oss.config')" :close-on-click-modal="false" :close-on-press-escape="false">
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" label-width="120px">
<el-form-item :label="$t('oss.type')" size="mini">
<el-radio-group v-model="dataForm.type">
<el-radio :label="1">{{ $t('oss.type1') }}</el-radio>
<el-radio :label="2">{{ $t('oss.type2') }}</el-radio>
<el-radio :label="3">{{ $t('oss.type3') }}</el-radio>
</el-radio-group>
</el-form-item>
<template v-if="dataForm.type === 1">
<el-form-item size="mini">
<a href="https://s.qiniu.com/7Rfaym" target="_blank">免费申请(七牛)10GB储存空间</a>
</el-form-item>
<el-form-item prop="qiniuDomain" :label="$t('oss.qiniuDomain')">
<el-input v-model="dataForm.qiniuDomain" :placeholder="$t('oss.qiniuDomainTips')"></el-input>
</el-form-item>
<el-form-item prop="qiniuPrefix" :label="$t('oss.qiniuPrefix')">
<el-input v-model="dataForm.qiniuPrefix" :placeholder="$t('oss.qiniuPrefixTips')"></el-input>
</el-form-item>
<el-form-item prop="qiniuAccessKey" :label="$t('oss.qiniuAccessKey')">
<el-input v-model="dataForm.qiniuAccessKey" :placeholder="$t('oss.qiniuAccessKeyTips')"></el-input>
</el-form-item>
<el-form-item prop="qiniuSecretKey" :label="$t('oss.qiniuSecretKey')">
<el-input v-model="dataForm.qiniuSecretKey" :placeholder="$t('oss.qiniuSecretKeyTips')"></el-input>
</el-form-item>
<el-form-item prop="qiniuBucketName" :label="$t('oss.qiniuBucketName')">
<el-input v-model="dataForm.qiniuBucketName" :placeholder="$t('oss.qiniuBucketNameTips')"></el-input>
</el-form-item>
</template>
<template v-else-if="dataForm.type === 2">
<el-form-item size="mini">
<a href="https://www.aliyun.com/minisite/goods?userCode=y93lfwbg" target="_blank">免费领取阿里云优惠券</a>
</el-form-item>
<el-form-item prop="aliyunDomain" :label="$t('oss.aliyunDomain')">
<el-input v-model="dataForm.aliyunDomain" :placeholder="$t('oss.aliyunDomainTips')"></el-input>
</el-form-item>
<el-form-item prop="aliyunPrefix" :label="$t('oss.aliyunPrefix')">
<el-input v-model="dataForm.aliyunPrefix" :placeholder="$t('oss.aliyunPrefixTips')"></el-input>
</el-form-item>
<el-form-item prop="aliyunEndPoint" :label="$t('oss.aliyunEndPoint')">
<el-input v-model="dataForm.aliyunEndPoint" :placeholder="$t('oss.aliyunEndPointTips')"></el-input>
</el-form-item>
<el-form-item prop="aliyunAccessKeyId" :label="$t('oss.aliyunAccessKeyId')">
<el-input v-model="dataForm.aliyunAccessKeyId" :placeholder="$t('oss.aliyunAccessKeyIdTips')"></el-input>
</el-form-item>
<el-form-item prop="aliyunAccessKeySecret" :label="$t('oss.aliyunAccessKeySecret')">
<el-input v-model="dataForm.aliyunAccessKeySecret" :placeholder="$t('oss.aliyunAccessKeySecretTips')"></el-input>
</el-form-item>
<el-form-item prop="aliyunBucketName" :label="$t('oss.aliyunBucketName')">
<el-input v-model="dataForm.aliyunBucketName" :placeholder="$t('oss.aliyunBucketNameTips')"></el-input>
</el-form-item>
</template>
<template v-else-if="dataForm.type === 3">
<el-form-item size="mini">
<a href="https://curl.qcloud.com/zt3xdYbZ" target="_blank">免费领取腾讯云优惠券</a>
</el-form-item>
<el-form-item prop="qcloudDomain" :label="$t('oss.qcloudDomain')">
<el-input v-model="dataForm.qcloudDomain" :placeholder="$t('oss.qcloudDomainTips')"></el-input>
</el-form-item>
<el-form-item prop="qcloudPrefix" :label="$t('oss.qcloudPrefix')">
<el-input v-model="dataForm.qcloudPrefix" :placeholder="$t('oss.qcloudPrefixTips')"></el-input>
</el-form-item>
<el-form-item prop="qcloudAppId" :label="$t('oss.qcloudAppId')">
<el-input v-model="dataForm.qcloudAppId" :placeholder="$t('oss.qcloudAppIdTips')"></el-input>
</el-form-item>
<el-form-item prop="qcloudSecretId" :label="$t('oss.qcloudSecretId')">
<el-input v-model="dataForm.qcloudSecretId" :placeholder="$t('oss.qcloudSecretIdTips')"></el-input>
</el-form-item>
<el-form-item prop="qcloudSecretKey" :label="$t('oss.qcloudSecretKey')">
<el-input v-model="dataForm.qcloudSecretKey" :placeholder="$t('oss.qcloudSecretKeyTips')"></el-input>
</el-form-item>
<el-form-item prop="qcloudBucketName" :label="$t('oss.qcloudBucketName')">
<el-input v-model="dataForm.qcloudBucketName" :placeholder="$t('oss.qcloudBucketNameTips')"></el-input>
</el-form-item>
<el-form-item prop="qcloudRegion" :label="$t('oss.qcloudRegion')">
<el-select v-model="dataForm.qcloudRegion" clearable :placeholder="$t('oss.qcloudRegionTips')" class="w-percent-100">
<el-option value="ap-beijing-1" :label="$t('oss.qcloudRegionBeijing1')"></el-option>
<el-option value="ap-beijing" :label="$t('oss.qcloudRegionBeijing')"></el-option>
<el-option value="ap-shanghai" :label="$t('oss.qcloudRegionShanghai')"></el-option>
<el-option value="ap-guangzhou" :label="$t('oss.qcloudRegionGuangzhou')"></el-option>
<el-option value="ap-chengdu" :label="$t('oss.qcloudRegionChengdu')"></el-option>
<el-option value="ap-chongqing" :label="$t('oss.qcloudRegionChongqing')"></el-option>
<el-option value="ap-singapore" :label="$t('oss.qcloudRegionSingapore')"></el-option>
<el-option value="ap-hongkong" :label="$t('oss.qcloudRegionHongkong')"></el-option>
<el-option value="na-toronto" :label="$t('oss.qcloudRegionToronto')"></el-option>
<el-option value="eu-frankfurt" :label="$t('oss.qcloudRegionFrankfurt')"></el-option>
</el-select>
</el-form-item>
</template>
</el-form>
<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'
export default {
data () {
return {
visible: false,
dataForm: {
type: 0,
qiniuDomain: '',
qiniuPrefix: '',
qiniuAccessKey: '',
qiniuSecretKey: '',
qiniuBucketName: '',
aliyunDomain: '',
aliyunPrefix: '',
aliyunEndPoint: '',
aliyunAccessKeyId: '',
aliyunAccessKeySecret: '',
aliyunBucketName: '',
qcloudDomain: '',
qcloudPrefix: '',
qcloudAppId: 0,
qcloudSecretId: '',
qcloudSecretKey: '',
qcloudBucketName: '',
qcloudRegion: ''
}
}
},
computed: {
dataRule () {
return {
qiniuDomain: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
qiniuAccessKey: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
qiniuSecretKey: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
qiniuBucketName: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
aliyunDomain: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
aliyunEndPoint: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
aliyunAccessKeyId: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
aliyunAccessKeySecret: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
aliyunBucketName: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
qcloudDomain: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
qcloudAppId: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
qcloudSecretId: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
qcloudSecretKey: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
qcloudBucketName: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
qcloudRegion: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
]
}
}
},
watch: {
'dataForm.type' (val) {
this.$refs['dataForm'].clearValidate()
}
},
methods: {
init () {
this.visible = true
this.$nextTick(() => {
this.$refs['dataForm'].resetFields()
this.getInfo()
})
},
// 获取信息
getInfo () {
this.$http.get('/sys/oss/info').then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.dataForm = res.data
}).catch(() => {})
},
// 表单提交
dataFormSubmitHandle: debounce(function () {
this.$refs['dataForm'].validate((valid) => {
if (!valid) {
return false
}
this.$http.post('/sys/oss', this.dataForm).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.visible = false
this.$emit('refreshDataList')
}
})
}).catch(() => {})
})
}, 1000, { 'leading': true, 'trailing': false })
}
data() {
return {
visible: false,
dataForm: {
type: 0,
qiniuDomain: '',
qiniuPrefix: '',
qiniuAccessKey: '',
qiniuSecretKey: '',
qiniuBucketName: '',
aliyunDomain: '',
aliyunPrefix: '',
aliyunEndPoint: '',
aliyunAccessKeyId: '',
aliyunAccessKeySecret: '',
aliyunBucketName: '',
qcloudDomain: '',
qcloudPrefix: '',
qcloudAppId: 0,
qcloudSecretId: '',
qcloudSecretKey: '',
qcloudBucketName: '',
qcloudRegion: ''
}
}
},
computed: {
dataRule() {
return {
qiniuDomain: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
qiniuAccessKey: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
qiniuSecretKey: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
qiniuBucketName: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
aliyunDomain: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
aliyunEndPoint: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
aliyunAccessKeyId: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
aliyunAccessKeySecret: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
aliyunBucketName: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
qcloudDomain: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
qcloudAppId: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
qcloudSecretId: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
qcloudSecretKey: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
qcloudBucketName: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
qcloudRegion: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }]
}
}
},
watch: {
'dataForm.type'(val) {
this.$refs['dataForm'].clearValidate()
}
},
methods: {
init() {
this.visible = true
this.$nextTick(() => {
this.$refs['dataForm'].resetFields()
this.getInfo()
})
},
// 获取信息
getInfo() {
this.$http
.get(this.$http.adornUrl('/sys/oss/info'))
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.dataForm = res.data
})
.catch(() => {})
},
// 表单提交
dataFormSubmitHandle: debounce(
function() {
this.$refs['dataForm'].validate(valid => {
if (!valid) {
return false
}
this.$http
.post(this.$http.adornUrl('/sys/oss'), this.dataForm)
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.visible = false
this.$emit('refreshDataList')
}
})
})
.catch(() => {})
})
},
1000,
{ leading: true, trailing: false }
)
}
}
</script>

108
src/views/modules/oss/oss-upload.vue
View File

@ -1,65 +1,59 @@
<template>
<el-dialog :visible.sync="visible" :title="$t('oss.upload')" :close-on-click-modal="false" :close-on-press-escape="false">
<el-upload
:action="url"
:file-list="fileList"
drag
multiple
:before-upload="beforeUploadHandle"
:on-success="successHandle"
class="text-center">
<i class="el-icon-upload"></i>
<div class="el-upload__text" v-html="$t('upload.text')"></div>
<div class="el-upload__tip" slot="tip">{{ $t('upload.tip', { 'format': 'jpg、png、gif' }) }}</div>
</el-upload>
</el-dialog>
<el-dialog :visible.sync="visible" :title="$t('oss.upload')" :close-on-click-modal="false" :close-on-press-escape="false">
<el-upload :action="url" :file-list="fileList" drag multiple :before-upload="beforeUploadHandle" :on-success="successHandle" class="text-center">
<i class="el-icon-upload"></i>
<div class="el-upload__text" v-html="$t('upload.text')"></div>
<div class="el-upload__tip" slot="tip">{{ $t('upload.tip', { format: 'jpg、png、gif' }) }}</div>
</el-upload>
</el-dialog>
</template>
<script>
import Cookies from 'js-cookie'
export default {
data () {
return {
visible: false,
url: '',
num: 0,
fileList: []
}
},
methods: {
init () {
this.visible = true
this.url = `${window.SITE_CONFIG['apiURL']}/sys/oss/upload?token=${Cookies.get('token')}`
this.num = 0
this.fileList = []
},
// 上传之前
beforeUploadHandle (file) {
if (file.type !== 'image/jpg' && file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
this.$message.error(this.$t('upload.tip', { 'format': 'jpg、png、gif' }))
return false
}
this.num++
},
// 上传成功
successHandle (res, file, fileList) {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.fileList = fileList
this.num--
if (this.num === 0) {
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.visible = false
this.$emit('refreshDataList')
}
})
}
}
}
data() {
return {
visible: false,
url: '',
num: 0,
fileList: []
}
},
methods: {
init() {
this.visible = true
// this.url = `${window.SITE_CONFIG['apiURL']}/sys/oss/upload?token=${Cookies.get('token')}`
this.url = (process.env.NODE_ENV === 'production' ? '/api' : '/yd-monitor') + `/sys/oss/upload?token=${Cookies.get('token')}`
this.num = 0
this.fileList = []
},
// 上传之前
beforeUploadHandle(file) {
if (file.type !== 'image/jpg' && file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
this.$message.error(this.$t('upload.tip', { format: 'jpg、png、gif' }))
return false
}
this.num++
},
// 上传成功
successHandle(res, file, fileList) {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.fileList = fileList
this.num--
if (this.num === 0) {
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.visible = false
this.$emit('refreshDataList')
}
})
}
}
}
}
</script>

151
src/views/modules/oss/oss.vue
View File

@ -1,48 +1,43 @@
<template>
<el-card shadow="never" class="aui-card--fill">
<div class="mod-oss__oss">
<el-form :inline="true" :model="dataForm">
<el-form-item>
<el-button type="primary" @click="configHandle()">{{ $t('oss.config') }}</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="uploadHandle()">{{ $t('oss.upload') }}</el-button>
</el-form-item>
<el-form-item>
<el-button type="danger" @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button>
</el-form-item>
</el-form>
<el-table
v-loading="dataListLoading"
:data="dataList"
border
@selection-change="dataListSelectionChangeHandle"
@sort-change="dataListSortChangeHandle"
style="width: 100%;">
<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
<el-table-column prop="url" :label="$t('oss.url')" header-align="center" align="center"></el-table-column>
<el-table-column prop="createDate" :label="$t('oss.createDate')" sortable="custom" header-align="center" align="center" width="180"></el-table-column>
<el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
<template slot-scope="scope">
<el-button type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
:current-page="page"
:page-sizes="[10, 20, 50, 100]"
:page-size="limit"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="pageSizeChangeHandle"
@current-change="pageCurrentChangeHandle">
</el-pagination>
<!-- 弹窗, 云存储配置 -->
<config v-if="configVisible" ref="config"></config>
<!-- 弹窗, 上传文件 -->
<upload v-if="uploadVisible" ref="upload" @refreshDataList="getDataList"></upload>
</div>
</el-card>
<el-card shadow="never" class="aui-card--fill">
<div class="mod-oss__oss">
<el-form :inline="true" :model="dataForm">
<el-form-item>
<el-button type="primary" @click="configHandle()">{{ $t('oss.config') }}</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="uploadHandle()">{{ $t('oss.upload') }}</el-button>
</el-form-item>
<el-form-item>
<el-button type="danger" @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button>
</el-form-item>
</el-form>
<el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" @sort-change="dataListSortChangeHandle" style="width: 100%;">
<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
<el-table-column prop="url" :label="$t('oss.url')" header-align="center" align="center"></el-table-column>
<el-table-column prop="createDate" :label="$t('oss.createDate')" sortable="custom" header-align="center" align="center" width="180"></el-table-column>
<el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
<template slot-scope="scope">
<el-button type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
:current-page="page"
:page-sizes="[10, 20, 50, 100]"
:page-size="limit"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="pageSizeChangeHandle"
@current-change="pageCurrentChangeHandle"
>
</el-pagination>
<!-- 弹窗, 云存储配置 -->
<config v-if="configVisible" ref="config"></config>
<!-- 弹窗, 上传文件 -->
<upload v-if="uploadVisible" ref="upload" @refreshDataList="getDataList"></upload>
</div>
</el-card>
</template>
<script>
@ -50,39 +45,39 @@ import mixinViewModule from '@/mixins/view-module'
import Config from './oss-config'
import Upload from './oss-upload'
export default {
mixins: [mixinViewModule],
data () {
return {
mixinViewModuleOptions: {
getDataListURL: '/sys/oss/page',
getDataListIsPage: true,
deleteURL: '/sys/oss',
deleteIsBatch: true
},
dataForm: {},
configVisible: false,
uploadVisible: false
}
},
components: {
Config,
Upload
},
methods: {
// 云存储配置
configHandle () {
this.configVisible = true
this.$nextTick(() => {
this.$refs.config.init()
})
},
// 上传文件
uploadHandle () {
this.uploadVisible = true
this.$nextTick(() => {
this.$refs.upload.init()
})
}
}
mixins: [mixinViewModule],
data() {
return {
mixinViewModuleOptions: {
getDataListURL: '/sys/oss/page',
getDataListIsPage: true,
deleteURL: '/sys/oss',
deleteIsBatch: true
},
dataForm: {},
configVisible: false,
uploadVisible: false
}
},
components: {
Config,
Upload
},
methods: {
// 云存储配置
configHandle() {
this.configVisible = true
this.$nextTick(() => {
this.$refs.config.init()
})
},
// 上传文件
uploadHandle() {
this.uploadVisible = true
this.$nextTick(() => {
this.$refs.upload.init()
})
}
}
}
</script>

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

@ -1,154 +1,164 @@
<template>
<el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false">
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" label-width="120px">
<el-form-item prop="name" :label="$t('dept.name')">
<el-input v-model="dataForm.name" :placeholder="$t('dept.name')"></el-input>
</el-form-item>
<el-form-item prop="parentName" :label="$t('dept.parentName')" class="dept-list">
<el-popover v-model="deptListVisible" ref="deptListPopover" placement="bottom-start" trigger="click">
<el-tree
:data="deptList"
:props="{ label: 'name', children: 'children' }"
node-key="id"
ref="deptListTree"
:highlight-current="true"
:expand-on-click-node="false"
accordion
@current-change="deptListTreeCurrentChangeHandle">
</el-tree>
</el-popover>
<el-input v-model="dataForm.parentName" v-popover:deptListPopover :readonly="true" :placeholder="$t('dept.parentName')">
<i
v-if="$store.state.user.superAdmin === 1 && dataForm.pid !== '0'"
slot="suffix"
@click.stop="deptListTreeSetDefaultHandle()"
class="el-icon-circle-close el-input__icon">
</i>
</el-input>
</el-form-item>
<el-form-item prop="sort" :label="$t('dept.sort')">
<el-input-number v-model="dataForm.sort" controls-position="right" :min="0" :label="$t('dept.sort')"></el-input-number>
</el-form-item>
</el-form>
<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>
<el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false">
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" label-width="120px">
<el-form-item prop="name" :label="$t('dept.name')">
<el-input v-model="dataForm.name" :placeholder="$t('dept.name')"></el-input>
</el-form-item>
<el-form-item prop="parentName" :label="$t('dept.parentName')" class="dept-list">
<el-popover v-model="deptListVisible" ref="deptListPopover" placement="bottom-start" trigger="click">
<el-tree
:data="deptList"
:props="{ label: 'name', children: 'children' }"
node-key="id"
ref="deptListTree"
:highlight-current="true"
:expand-on-click-node="false"
accordion
@current-change="deptListTreeCurrentChangeHandle"
>
</el-tree>
</el-popover>
<el-input v-model="dataForm.parentName" v-popover:deptListPopover :readonly="true" :placeholder="$t('dept.parentName')">
<i
v-if="$store.state.user.superAdmin === 1 && dataForm.pid !== '0'"
slot="suffix"
@click.stop="deptListTreeSetDefaultHandle()"
class="el-icon-circle-close el-input__icon"
>
</i>
</el-input>
</el-form-item>
<el-form-item prop="sort" :label="$t('dept.sort')">
<el-input-number v-model="dataForm.sort" controls-position="right" :min="0" :label="$t('dept.sort')"></el-input-number>
</el-form-item>
</el-form>
<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'
export default {
data () {
return {
visible: false,
deptList: [],
deptListVisible: false,
dataForm: {
id: '',
name: '',
pid: '',
parentName: '',
sort: 0
}
}
},
computed: {
dataRule () {
return {
name: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
parentName: [
{ required: true, message: this.$t('validate.required'), trigger: 'change' }
]
}
}
},
methods: {
init () {
this.visible = true
this.$nextTick(() => {
this.$refs['dataForm'].resetFields()
this.getDeptList().then(() => {
if (this.dataForm.id) {
this.getInfo()
} else if (this.$store.state.user.superAdmin === 1) {
this.deptListTreeSetDefaultHandle()
}
})
})
},
// 获取部门列表
getDeptList () {
return this.$http.get('/sys/dept/list').then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.deptList = res.data
}).catch(() => {})
},
// 获取信息
getInfo () {
this.$http.get(`/sys/dept/${this.dataForm.id}`).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.dataForm = {
...this.dataForm,
...res.data
}
if (this.dataForm.pid === '0') {
return this.deptListTreeSetDefaultHandle()
}
this.$refs.deptListTree.setCurrentKey(this.dataForm.pid)
}).catch(() => {})
},
// 上级部门树, 设置默认值
deptListTreeSetDefaultHandle () {
this.dataForm.pid = '0'
this.dataForm.parentName = this.$t('dept.parentNameDefault')
},
// 上级部门树, 选中
deptListTreeCurrentChangeHandle (data) {
this.dataForm.pid = data.id
this.dataForm.parentName = data.name
this.deptListVisible = false
},
// 表单提交
dataFormSubmitHandle: debounce(function () {
this.$refs['dataForm'].validate((valid) => {
if (!valid) {
return false
}
this.$http[!this.dataForm.id ? 'post' : 'put']('/sys/dept', this.dataForm).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.visible = false
this.$emit('refreshDataList')
}
})
}).catch(() => {})
})
}, 1000, { 'leading': true, 'trailing': false })
}
data() {
return {
visible: false,
deptList: [],
deptListVisible: false,
dataForm: {
id: '',
name: '',
pid: '',
parentName: '',
sort: 0
}
}
},
computed: {
dataRule() {
return {
name: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
parentName: [{ required: true, message: this.$t('validate.required'), trigger: 'change' }]
}
}
},
methods: {
init() {
this.visible = true
this.$nextTick(() => {
this.$refs['dataForm'].resetFields()
this.getDeptList().then(() => {
if (this.dataForm.id) {
this.getInfo()
} else if (this.$store.state.user.superAdmin === 1) {
this.deptListTreeSetDefaultHandle()
}
})
})
},
// 获取部门列表
getDeptList() {
return this.$http
.get(this.$http.adornUrl('/sys/dept/list'))
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.deptList = res.data
})
.catch(() => {})
},
// 获取信息
getInfo() {
this.$http
.get(this.$http.adornUrl(`/sys/dept/${this.dataForm.id}`))
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.dataForm = {
...this.dataForm,
...res.data
}
if (this.dataForm.pid === '0') {
return this.deptListTreeSetDefaultHandle()
}
this.$refs.deptListTree.setCurrentKey(this.dataForm.pid)
})
.catch(() => {})
},
// 上级部门树, 设置默认值
deptListTreeSetDefaultHandle() {
this.dataForm.pid = '0'
this.dataForm.parentName = this.$t('dept.parentNameDefault')
},
// 上级部门树, 选中
deptListTreeCurrentChangeHandle(data) {
this.dataForm.pid = data.id
this.dataForm.parentName = data.name
this.deptListVisible = false
},
// 表单提交
dataFormSubmitHandle: debounce(
function() {
this.$refs['dataForm'].validate(valid => {
if (!valid) {
return false
}
this.$http[!this.dataForm.id ? 'post' : 'put'](this.$http.adornUrl('/sys/dept'), this.dataForm)
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.visible = false
this.$emit('refreshDataList')
}
})
})
.catch(() => {})
})
},
1000,
{ leading: true, trailing: false }
)
}
}
</script>
<style lang="scss">
.mod-sys__dept {
.dept-list {
.el-input__inner,
.el-input__suffix {
cursor: pointer;
}
}
.dept-list {
.el-input__inner,
.el-input__suffix {
cursor: pointer;
}
}
}
</style>

68
src/views/modules/sys/dept.vue
View File

@ -1,43 +1,43 @@
<template>
<el-card shadow="never" class="aui-card--fill">
<div class="mod-sys__dept">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item>
<el-button v-if="$hasPermission('sys:dept:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
</el-form-item>
</el-form>
<el-table v-loading="dataListLoading" :data="dataList" row-key="id" border style="width: 100%;">
<el-table-column prop="name" :label="$t('dept.name')" header-align="center" min-width="150"></el-table-column>
<el-table-column prop="parentName" :label="$t('dept.parentName')" header-align="center" align="center"></el-table-column>
<el-table-column prop="sort" :label="$t('dept.sort')" header-align="center" align="center" width="80"></el-table-column>
<el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
<template slot-scope="scope">
<el-button v-if="$hasPermission('sys:dept:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>
<el-button v-if="$hasPermission('sys:dept:delete')" type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
</template>
</el-table-column>
</el-table>
<!-- 弹窗, 新增 / 修改 -->
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
</div>
</el-card>
<el-card shadow="never" class="aui-card--fill">
<div class="mod-sys__dept">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item>
<el-button v-if="$hasPermission('sys:dept:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
</el-form-item>
</el-form>
<el-table v-loading="dataListLoading" :data="dataList" row-key="id" border style="width: 100%;">
<el-table-column prop="name" :label="$t('dept.name')" header-align="center" min-width="150"></el-table-column>
<el-table-column prop="parentName" :label="$t('dept.parentName')" header-align="center" align="center"></el-table-column>
<el-table-column prop="sort" :label="$t('dept.sort')" header-align="center" align="center" width="80"></el-table-column>
<el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
<template slot-scope="scope">
<el-button v-if="$hasPermission('sys:dept:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>
<el-button v-if="$hasPermission('sys:dept:delete')" type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
</template>
</el-table-column>
</el-table>
<!-- 弹窗, 新增 / 修改 -->
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
</div>
</el-card>
</template>
<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './dept-add-or-update'
export default {
mixins: [mixinViewModule],
data () {
return {
mixinViewModuleOptions: {
getDataListURL: '/sys/dept/list',
deleteURL: '/sys/dept'
}
}
},
components: {
AddOrUpdate
}
mixins: [mixinViewModule],
data() {
return {
mixinViewModuleOptions: {
getDataListURL: '/sys/dept/list',
deleteURL: '/sys/dept'
}
}
},
components: {
AddOrUpdate
}
}
</script>

Some files were not shown because too many files have changed in this diff Show More