|
|
@@ -6,32 +6,12 @@ |
|
|
|
</el-form-item> |
|
|
|
<el-form-item> |
|
|
|
<el-button @click="getDataList()">查询</el-button> |
|
|
|
<el-button v-if="$hasPermission('monitoring:equipmenplcconnect:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button> |
|
|
|
<el-button v-if="$hasPermission('monitoring:equipmentplcconnect:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
<!-- <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;"> |
|
|
|
<el-table-column type="selection" header-align="center" align="center" width="50"> </el-table-column> |
|
|
|
<el-table-column prop="id" header-align="center" align="center" label="id"> </el-table-column> |
|
|
|
<el-table-column prop="plcId" header-align="center" align="center" label="plc表iD"> </el-table-column> |
|
|
|
<el-table-column prop="equipmentId" header-align="center" align="center" label="设备表id"> </el-table-column> |
|
|
|
<el-table-column prop="enabled" header-align="center" align="center" label="启用状态:0 、停用,1、启用"> </el-table-column> |
|
|
|
<el-table-column prop="remark" header-align="center" align="center" label="备注"> </el-table-column> |
|
|
|
<el-table-column prop="valid" header-align="center" align="center" label="删除标志,是否有效:1 可用 0不可用"> </el-table-column> |
|
|
|
<el-table-column prop="creatorId" header-align="center" align="center" label="创建人"> </el-table-column> |
|
|
|
<el-table-column prop="creatorName" header-align="center" align="center" label="创建人姓名"> </el-table-column> |
|
|
|
<el-table-column prop="createTime" header-align="center" align="center" label="创建时间"> </el-table-column> |
|
|
|
<el-table-column prop="updaterId" header-align="center" align="center" label="更新人"> </el-table-column> |
|
|
|
<el-table-column prop="updaterName" header-align="center" align="center" label="更新人姓名"> </el-table-column> |
|
|
|
<el-table-column prop="updateTime" header-align="center" align="center" label="更新时间"> </el-table-column> |
|
|
|
<el-table-column prop="version" header-align="center" align="center" label="版本号"> </el-table-column> |
|
|
|
<el-table-column fixed="right" header-align="center" align="center" width="150" label="操作"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button> |
|
|
|
<el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table> --> |
|
|
|
<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="500" /> |
|
|
|
|
|
|
|
<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="500" @operate-event="handleOperations" @refreshDataList="getDataList" /> |
|
|
|
|
|
|
|
<el-pagination |
|
|
|
@size-change="sizeChangeHandle" |
|
|
|
@current-change="currentChangeHandle" |
|
|
@@ -43,36 +23,104 @@ |
|
|
|
> |
|
|
|
</el-pagination> |
|
|
|
<!-- 弹窗, 新增 / 修改 --> |
|
|
|
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update> |
|
|
|
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" :configs="addOrUpdateConfigs" @refreshDataList="getDataList" @destory-dialog="addOrUpdateVisible = false" /> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import AddOrUpdate from './equipmentPlcConnect-add-or-update' |
|
|
|
// import AddOrUpdate from './equipmentPlcConnect-add-or-update' |
|
|
|
import AddOrUpdate from '@/components/base-dialog/addOrUpdate' |
|
|
|
import BaseTable from '@/components/base-table' |
|
|
|
import TableOperateComponent from '@/components/base-table/components/operationComponent' |
|
|
|
import TableTextComponent from '@/components/base-table/components/detailComponent' |
|
|
|
// import TableTextComponent from '@/components/base-table/components/detailComponent' |
|
|
|
import { dictFilter } from '@/utils/filters' |
|
|
|
// import axios from '@/utils/request.js' |
|
|
|
|
|
|
|
const tableConfigs = [ |
|
|
|
{ "prop": "id", "name": "id" }, |
|
|
|
{ "prop": "plcId", "name": "plc表iD" }, |
|
|
|
{ "prop": "equipmentId", "name": "设备表id" }, |
|
|
|
{ "prop": "enabled", "name": "启用状态:0 、停用,1、启用" }, |
|
|
|
{ "prop": "remark", "name": "备注" }, |
|
|
|
{ "prop": "valid", "name": "删除标志,是否有效:1 可用 0不可用" }, |
|
|
|
{ "prop": "creatorId", "name": "创建人" }, |
|
|
|
{ "prop": "creatorName", "name": "创建人姓名" }, |
|
|
|
{ "prop": "createTime", "name": "添加时间" }, |
|
|
|
{ "prop": "updaterId", "name": "更新人" }, |
|
|
|
{ "prop": "updaterName", "name": "更新人姓名" }, |
|
|
|
{ "prop": "updateTime", "name": "更新时间" }, |
|
|
|
{ "prop": "version", "name": "版本号" }, { prop: 'operations', name: '操作', fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['edit', 'delete'] } |
|
|
|
{ type: 'index', name: '序号' }, |
|
|
|
{ prop: 'lineName', name: '产线' }, |
|
|
|
{ prop: 'sectionName', name: '工段' }, |
|
|
|
{ prop: 'equName', name: '设备' }, |
|
|
|
{ prop: 'equCode', name: '设备编码' }, |
|
|
|
{ prop: 'plcCode', name: 'PLC编码' }, |
|
|
|
{ prop: 'plcName', name: 'PLC名称' }, |
|
|
|
{ prop: 'plcIp', name: 'PLC IP' }, |
|
|
|
{ prop: 'operations', name: '操作', 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: '设备', required: true, type: 'select', options: [] }, |
|
|
|
{ name: 'plcId', label: 'PLC名称', required: true, type: 'select', options: [] } |
|
|
|
], |
|
|
|
operations: [ |
|
|
|
{ name: 'cancel', url: true, showAlways: true }, |
|
|
|
{ name: 'save', url: '/monitoring/equipmentPlcConnect', permission: '', showOnEdit: false }, |
|
|
|
{ name: 'update', url: '/monitoring/equipmentPlcConnect', permission: '', showOnEdit: true } |
|
|
|
], |
|
|
|
subtable: { |
|
|
|
title: 'PLC采集参数', |
|
|
|
url: '/monitoring/equipmentPlcParam', |
|
|
|
relatedField: 'plcConId', |
|
|
|
tableConfigs: [ |
|
|
|
{ type: 'index', name: '序号' }, |
|
|
|
// { prop: 'plcConId', name: 'plc连接表ID' }, |
|
|
|
{ prop: 'paramCode', name: '参数编码', formField: true, rules: [{ required: true, message: '必填', trigger: 'blur' }] }, |
|
|
|
{ prop: 'paramName', name: '参数名称', formField: true, rules: [{ required: true, message: '必填', trigger: 'blur' }] }, |
|
|
|
{ prop: 'paramAddress', name: '参数地址', formField: true }, |
|
|
|
{ prop: 'unitDictValue', name: '单位', filter: dictFilter(UnitDictTypeId), formField: true, formType: 'select', formOptions: getUnitList() }, |
|
|
|
{ prop: 'minValue', name: '最小值', formField: true }, |
|
|
|
{ prop: 'maxValue', name: '最大值', formField: true }, |
|
|
|
{ prop: 'defaultValue', name: '参数设定标准值', formField: true }, |
|
|
|
{ prop: 'description', name: '描述', formField: true }, |
|
|
|
{ |
|
|
|
prop: 'enabled', |
|
|
|
name: '启用状态', |
|
|
|
filter: val => ['停用', '启用'][+val], |
|
|
|
// filter: val => ({0:'停用', 1:'启用'}[+val]), |
|
|
|
rules: [{ required: true, message: '必填', trigger: 'blur' }], |
|
|
|
formField: true, |
|
|
|
formType: 'select', |
|
|
|
formOptions: [ |
|
|
|
{ value: 0, label: '停用' }, |
|
|
|
{ value: 1, label: '启用' } |
|
|
|
] |
|
|
|
}, |
|
|
|
{ prop: 'remark', name: '备注', formField: true }, |
|
|
|
// { prop: 'createTime', name: '添加时间' }, |
|
|
|
{ |
|
|
|
prop: 'collection', |
|
|
|
name: '是否采集', |
|
|
|
filter: val => ['不采集', '采集'][+val], |
|
|
|
rules: [{ required: true, message: '必填', trigger: 'blur' }], |
|
|
|
formField: true, |
|
|
|
formType: 'select', |
|
|
|
formOptions: [ |
|
|
|
{ value: 0, label: '不采集' }, |
|
|
|
{ value: 1, label: '采集' } |
|
|
|
] |
|
|
|
}, |
|
|
|
// { prop: 'collectionCycle', name: '采集周期(s) 暂不使用' }, |
|
|
|
// { prop: 'reportingCycle', name: '上报周期(s) 暂不使用' }, |
|
|
|
// { prop: 'reportingMethod', name: '上报方式 暂不使用' }, |
|
|
|
// { prop: 'reportingCode', name: '上报编码 暂不使用' }, |
|
|
|
{ prop: 'operations', name: '操作', fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['edit', 'delete'] } |
|
|
|
] |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return {tableConfigs, |
|
|
|
return { |
|
|
|
addOrUpdateConfigs, |
|
|
|
tableConfigs, |
|
|
|
dataForm: { |
|
|
|
key: '' |
|
|
|
}, |
|
|
@@ -86,12 +134,53 @@ export default { |
|
|
|
} |
|
|
|
}, |
|
|
|
components: { |
|
|
|
AddOrUpdate,BaseTable |
|
|
|
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 |
|
|
|