@@ -17,6 +17,7 @@ t.routes['质量管理'] = 'Quality Management' | |||
t.routes['权限管理'] = 'Permission Management' | |||
t.routes['系统设置'] = 'System Settings' | |||
t.routes['日志管理'] = 'Log Management' | |||
t.routes['数据分析'] = 'Data Analysis' | |||
// 二级 | |||
t.routes['厂务'] = 'Factory Affair' | |||
@@ -42,6 +43,9 @@ t.routes['定时任务'] = 'Timed Tasks' | |||
t.routes['文件上传'] = 'File Upload' | |||
t.routes['登录日志'] = 'Login Records' | |||
t.routes['操作日志'] = 'Oprations Records' | |||
t.routes['设备效率分析'] = 'Equipment Efficiency Analysis' | |||
t.routes['设备异常分析'] = 'Equipment Exceptions Analysis' | |||
t.routes['设备状态时序图'] = 'Equipment Status Timesequence' | |||
// 三级 | |||
t.routes['工厂'] = 'Factory' | |||
@@ -18,6 +18,7 @@ t.routes['质量管理'] = '质量管理' | |||
t.routes['权限管理'] = '权限管理' | |||
t.routes['系统设置'] = '系统设置' | |||
t.routes['日志管理'] = '日志管理' | |||
t.routes['数据分析'] = '数据分析' | |||
// 二级 | |||
t.routes['厂务'] = '厂务' | |||
@@ -43,6 +44,9 @@ t.routes['定时任务'] = '定时任务' | |||
t.routes['文件上传'] = '文件上传' | |||
t.routes['登录日志'] = '登录日志' | |||
t.routes['操作日志'] = '操作日志' | |||
t.routes['设备效率分析'] = '设备效率分析' | |||
t.routes['设备异常分析'] = '设备异常分析' | |||
t.routes['设备状态时序图'] = '设备状态时序图' | |||
// 三级 | |||
t.routes['工厂'] = '工厂' | |||
@@ -0,0 +1,445 @@ | |||
<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> |
@@ -0,0 +1,445 @@ | |||
<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> |
@@ -0,0 +1,445 @@ | |||
<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> |