Skip to content

E
energyai_vue
Commit 735966f9 authored by co_dengxiongwen's avatar co_dengxiongwen
Browse files
Options

点位管理

parent 563c6c7b
Hide whitespace changes
Inline Side-by-side
Showing with 210 additions and 147 deletions
src/pages/sys/points/index.vue
View file @ 735966f9
...@@ -20,36 +20,80 @@ ...@@ -20,36 +20,80 @@
el-container(style="padding:0px;height:77.6vh;") el-container(style="padding:0px;height:77.6vh;")
card-warp(:title="listTitle?listTitle :'点位列表' " , height="45px") card-warp(:title="listTitle?listTitle :'点位列表' " , height="45px")
span(slot='right') span(slot='right')
el-button(type='primary' size='mini' icon='el-icon-plus',style='float:right;transform:translateY(6px);margin-right:20px;' :disabled="flag" @click='addOrUpdateHandle()') 新增 el-button(type='primary' size='mini' icon='el-icon-plus',style='float:right;transform:translateY(6px);margin-right:20px;' v-if="isAuth('sys:points:save')" :disabled="flag" @click='addOrUpdateHandle()') 新增
div(slot='content') div(slot='content')
table-list(:tableColums='tableHeader' :tableData='dataList' :opNum='2') table-list(:tableColums='tableHeader' :tableData='dataList' :opNum='2')
template(#functionCodeType='data')
font(v-if='data.scope.functionCodeType == 1') 读线圈
font(v-if='data.scope.functionCodeType == 2') 读离散量输入
font(v-if='data.scope.functionCodeType == 3') 读保持寄存器
font(v-if='data.scope.functionCodeType == 4') 读输入寄存器
template(#dataType='data')
font(v-if='data.scope.dataType == 1') Integer
font(v-if='data.scope.dataType == 2') String
font(v-if='data.scope.dataType == 3') Float
font(v-if='data.scope.dataType == 4') Double
font(v-if='data.scope.dataType == 5') Short
font(v-if='data.scope.dataType == 6') Long
font(v-if='data.scope.dataType == 7') Boolean
//- 操作项 //- 操作项
template( #operation='data' ) template( #operation='data' )
el-button(type="text" v-if="isAuth('sys:dic:update')" @click="addOrUpdateHandle(data.scope)") 编辑 el-button(type="text" v-if="isAuth('sys:points:update')" @click="addOrUpdateHandle(data.scope)") 编辑
el-button(type="text" v-if="isAuth('sys:dic:delete')" @click="deleteHandle(data.scope)") 删除 el-button(type="text" v-if="isAuth('sys:points:delete')" @click="deleteHandle(data.scope.id)") 删除
// 弹窗, 新增 / 修改
//- add-or-update(v-if='addOrUpdateVisible', ref='addOrUpdate', :p-list='list' @refreshdatalist='refreshdatalist' @refreshBean='refreshBean' @addNotify='addNotify')
//- query-detail(v-if='queryDetailVisible', ref='queryDetail')
el-footer.box_footer el-footer.box_footer
tablePagination( :pageSize="pageSize" :totalSize="totalPage" @parentMethod="getDataList" ) tablePagination( :pageSize="pageSize" :totalSize="totalPage" @parentMethod="getDataList" )
el-dialog(width="40%",:append-to-body='true' :visible.sync='visible' :modal-append-to-body='false' @close="closeForm('ruleForm')")
div.title-bold(slot='title') {{!ruleForm.id ? '新增点位': '编辑点位'}}
el-form(:model="ruleForm", :inline="false" :rules="rules" ref="ruleForm", label-width="100px", @submit.native.prevent)
el-card(shadow="never")
el-row(:span='24')
el-col(:span='24')
el-form-item(label="资源点ID:" prop="resourceId" v-if='false')
el-input(v-model='ruleForm.resourceId' placeholder="" clearable v-if='false')
el-col(:span='24')
el-form-item(label="点位名称:" prop="name")
el-input(v-model='ruleForm.name' placeholder="请输入点位名称" clearable )
el-col(:span='12')
el-form-item(label="从机ID:" prop="slaveId")
el-input(v-model.number='ruleForm.slaveId' placeholder="请输从入机ID" clearable )
el-col(:span='12')
el-form-item(label="地址:" prop="registerAddress")
el-input(v-model.number='ruleForm.registerAddress' placeholder="请输入地址" clearable )
el-col(:span='12')
el-form-item(label="功能码:" prop="functionCodeType")
el-select.mywidth(v-model="ruleForm.functionCodeType" placeholder="请选择功能码" clearable)
el-option(v-for="(item,index) in functionCodeTypeList" :key="index" :label="item.name" :value="item.id" :code="item.id")
el-col(:span='12')
el-form-item(label="数据类型:" prop="dataType")
el-select.mywidth(v-model="ruleForm.dataType" placeholder="请选择数据类型" clearable)
el-option(v-for="(item,index) in dataTypeList" :key="index" :label="item.name" :value="item.id" :code="item.id")
div(slot="footer" style=' text-align: center;')
el-button(type='primary' size='medium' @click="cancel") 取 消
el-button(type='primary' size='medium' @click="addsave" v-prevent-re-click) 保 存
</template> </template>
<script> <script>
// import AddOrUpdate from './add-or-update'
// import QueryDetail from './query-detail'
import Vue from 'vue' import Vue from 'vue'
import tableList from '@/pages/components/tableList' import tableList from '@/pages/components/tableList'
import tablePagination from '@/pages/components/tablePagination' import tablePagination from '@/pages/components/tablePagination'
let that
export default { export default {
data() { data() {
let validateNumber = (rule, value, callback) => {
if (value <= 0) {
callback(new Error('只能输入正整数'))
} else if (value > 99999999) {
callback(new Error('排序值超出范围'))
} else {
callback()
}
}
return { return {
flag: true,
listTitle: '', listTitle: '',
addOrUpdateVisible: false,
queryDetailVisible: false,
urlPath: window.CONFIG.urlPath,
treeData: [], treeData: [],
defaultExpandedKeys: [], defaultExpandedKeys: [],
defaultProps: { defaultProps: {
...@@ -57,12 +101,22 @@ export default { ...@@ -57,12 +101,22 @@ export default {
label: 'name', label: 'name',
level: 'level' level: 'level'
}, },
functionCodeTypeList: [
{ id: 1, name: '读线圈' },
{ id: 2, name: '读离散量输入' },
{ id: 3, name: '读保持寄存器' },
{ id: 4, name: '读输入寄存器' }
],
dataTypeList: [
{ id: 1, name: 'Integer' },
{ id: 2, name: 'String' },
{ id: 3, name: 'Float' },
{ id: 4, name: 'Double' },
{ id: 5, name: 'Short' },
{ id: 6, name: 'Long' },
{ id: 7, name: 'Boolean' }
],
nodeKey: 'id', nodeKey: 'id',
station: {}, //当前选择的站点
mapList: [], //当前站点的所有层
stationMap: {}, //当前选择的层
resource: {}, //当前选择的资源点
typeList: [],
checkedData: { checkedData: {
stationId: '', stationId: '',
stationName: '', stationName: '',
...@@ -72,16 +126,46 @@ export default { ...@@ -72,16 +126,46 @@ export default {
resourceId: '', resourceId: '',
sId: localStorage.getItem('stationId') sId: localStorage.getItem('stationId')
}, },
rules: {
//添加规则
name: [
{ required: true, message: '点位名称不能为空', trigger: 'blur' },
{ min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }
],
slaveId: [
{ required: true, message: '从机ID不能为空' },
{ type: 'number', message: '从机ID必须为数字' },
{ validator: validateNumber, trigger: ['blur', 'change'] }
],
registerAddress: [
{ required: true, message: '地址不能为空' },
{ type: 'number', message: '地址必须为数字' },
{ validator: validateNumber, trigger: ['blur', 'change'] }
],
functionCodeType: [
{
required: true,
message: '功能码不能为空',
trigger: ['blur', 'change']
}
],
dataType: [
{
required: true,
message: '数据类型不能为空',
trigger: ['blur', 'change']
}
]
},
currentNode: {}, currentNode: {},
list: [],
searchInput: '', searchInput: '',
editable: false, editable: false,
checkList: [], //筛选数据 checkList: [], //筛选数据
tableHeader: [ tableHeader: [
{ label: '点位名称', prop: 'name' }, { label: '点位名称', prop: 'name' },
{ label: '从机ID', prop: 'slaveId' }, { label: '从机ID', prop: 'slaveId' },
{ label: '功能码', prop: 'functionCodeType' }, { label: '功能码', prop: 'functionCodeType', slot: true },
{ label: '数据类型', prop: 'dataType' }, { label: '数据类型', prop: 'dataType', slot: true },
{ label: '寄存器地址', prop: 'registerAddress' } { label: '寄存器地址', prop: 'registerAddress' }
], ],
tableOption: { tableOption: {
...@@ -89,14 +173,14 @@ export default { ...@@ -89,14 +173,14 @@ export default {
maxHeight: 500 //高度 maxHeight: 500 //高度
}, },
dataList: [], //列表 dataList: [], //列表
ruleForm: {},
visible: false,
dataListLoading: false, dataListLoading: false,
pageIndex: 1, pageIndex: 1,
pageSize: 10, pageSize: 10,
totalPage: 0, totalPage: 0,
sort: 'create_time', sort: 'create_time',
order: 'asc', order: 'asc'
//当前选择的层级
tierMap: null
} }
}, },
components: { components: {
...@@ -111,7 +195,6 @@ export default { ...@@ -111,7 +195,6 @@ export default {
} }
}, },
created() { created() {
that = this
this.initTree() this.initTree()
}, },
methods: { methods: {
...@@ -135,28 +218,18 @@ export default { ...@@ -135,28 +218,18 @@ export default {
console.log('treeData', this.treeData) console.log('treeData', this.treeData)
this.defaultExpandedKeys = [] this.defaultExpandedKeys = []
this.$nextTick(() => { this.$nextTick(() => {
if ( this.currentNode = this.$refs.tree.getNode(
!this.treeData || this.treeData[0].children[0].id
this.treeData.length <= 0 || ).data
!this.treeData[0].children || //将选中的层级树节点设置为选中
this.treeData[0].children.length <= 0 this.$refs.tree.setCurrentNode(this.currentNode)
) { Vue.set(this.treeData[0].children[0], 'iconB', true)
} this.defaultExpandedKeys = [this.currentNode.id]
if (!this.tierMap) { this.isFlag(this.treeData, this.currentNode.id)
this.currentNode = this.$refs.tree.getNode(
this.treeData[0].children[0].id
).data
//将选中的层级树节点设置为选中
this.$refs.tree.setCurrentNode(this.currentNode)
Vue.set(this.treeData[0].children[0], 'iconB', true)
this.defaultExpandedKeys = [this.currentNode.id]
this.isFlag(this.treeData, this.currentNode.id)
}
}) })
} }
}) })
}, },
isFlag(data, id) { isFlag(data, id) {
data.forEach((res) => { data.forEach((res) => {
if (res.id === id) { if (res.id === id) {
...@@ -169,51 +242,32 @@ export default { ...@@ -169,51 +242,32 @@ export default {
} }
}) })
}, },
//线路资源点树节点点击事件 //线路资源点树节点点击事件
handleNodeClick(node) { handleNodeClick(node) {
// console.log('node.id', node.id)
//console.log('选中树节点', node) //console.log('选中树节点', node)
this.currentNode = node this.currentNode = node
let level = node.level let level = node.level
let name = node.name
let id = node.id let id = node.id
let code = node.code
this.isFlag(this.treeData, id) this.isFlag(this.treeData, id)
if (level === 3) { if (level === 6) {
//站点 this.flag = false
this.checkedData.stationId = id
this.checkedData.stationName = name
// this.initTreeStationMap(node)
} else if (level === 4) {
this.tierMap = node
//层级
this.checkedData.tierId = id
this.checkedData.tierName = name
this.checkedData.stationId = node.stationId
this.stationMap = node
// console.log('选中节点的层级id', this.tierId)
} else if (level === 5) {
this.tierMap = node
//资源点类型
this.checkedData.stationId = node.stationId
this.checkedData.tierId = node.tierId
} else if (level === 6) {
this.tierMap = node
this.checkedData.resourceId = id this.checkedData.resourceId = id
this.checkedData.tierId = node.tierId this.getDataList()
} else {
this.flag = true
this.checkedData.resourceId = ''
} }
}, },
getDataList(sort, order) { getDataList(sort, order) {
this.dataListLoading = true this.dataListLoading = true
this.$http({ this.$http({
url: this.$http.adornUrl('/sysDictionary/dictionaryList'), url: this.$http.adornUrl('/liResourcePoints/pageList'),
method: 'post', method: 'post',
data: { data: {
page: this.pageIndex, page: this.pageIndex,
rows: this.pageSize, rows: this.pageSize,
parentId: this.dicId, resourceId: this.checkedData.resourceId,
sort: sort || 'create_time', sort: sort || 'create_time',
order: order || 'asc', order: order || 'asc',
stationId: this.stationId stationId: this.stationId
...@@ -230,62 +284,100 @@ export default { ...@@ -230,62 +284,100 @@ export default {
}) })
}, },
// 新增 / 修改 // 新增 / 修改
addOrUpdateHandle(item) { addOrUpdateHandle(row) {
this.resource = null this.visible = true
this.addOrUpdateVisible = true if (row) {
this.ruleForm = JSON.parse(JSON.stringify(row))
this.$nextTick(() => {
this.$refs.addOrUpdate.init(item)
})
},
// 删除
deleteHandle() {
// console.log('dataListSelections:', this.dataListSelections)
// var ids = this.checkedData.resourceId
// ? [this.checkedData.resourceId]
// : this.dataListSelections.map(item => {
// return item.id
// })
// this.listItem.id
// var ids = [this.checkedData.resourceId]
let ids = []
if (this.listItem.id) {
ids.push(this.listItem.id)
} else { } else {
ids.push(this.listItem.key) this.ruleForm = {}
if (this.currentNode) {
this.ruleForm.resourceId = this.currentNode.id
this.ruleForm.stationId = this.currentNode.stationId
}
} }
for (let i in ids) { },
//删除绘制的图标和线 // 提交
// this.delPoint(ids[i]) addsave() {
for (let j in this.list) { this.$refs['ruleForm'].validate((valid) => {
if (this.list[j].id === ids[i]) { if (valid) {
this.$http({ this.$http({
url: this.$http.adornUrl('/liResource/validateDeleteResource'), url: this.$http.adornUrl(
method: 'get', `/liResourcePoints/${!this.ruleForm.id ? 'save' : 'update'}`
params: this.$http.adornParams({ ),
stationId: localStorage.getItem('stationId'), method: 'post',
id: ids[i] data: this.ruleForm
}).then((data) => {
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.visible = false
this.getDataList()
}
}) })
}).then((data) => { } else {
if (data && data.code === 0) { this.$message.error(data.msg)
//删除绘制的图标和线 }
this.delPoint(ids[i]) })
this.list[j].deleted = 1 }
this.listItem = '' })
this.cancelDisabled = false },
// 删除
deleteHandle(id) {
var ids = [id]
this.$confirm(`确认删除该点位?`, '删除点位', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
closeOnClickModal: false
}).then(() => {
this.$http({
url: this.$http.adornUrl('/liResourcePoints/deleteByFlag'),
method: 'post',
data: this.$http.adornData(ids, false)
}).then((res) => {
if (res && res.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.getDataList()
} }
}) })
} else {
this.$message.error(res.msg)
} }
if (!this.list[j].id) { })
if (this.list[j].key === ids[i]) { })
//删除绘制的图标和线 },
this.delPoint(ids[i]) closeForm(formRule) {
this.list.splice(j, 1) this.ruleForm = {}
} this.$refs[formRule].resetFields()
} this.visible = false
},
//取消
cancel() {
this.$confirm(
'确认取消?',
`${!this.ruleForm.id ? '新增点位' : '编辑点位'}`,
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
} }
} )
.then(() => {
this.closeForm('ruleForm')
})
.catch(() => {
this.$message({
type: 'info',
message: '已取消退出'
})
})
} }
} }
} }
...@@ -390,28 +482,8 @@ export default { ...@@ -390,28 +482,8 @@ export default {
.dic_tree /deep/.el-tree-node__expand-icon.is-leaf::before { .dic_tree /deep/.el-tree-node__expand-icon.is-leaf::before {
opacity: 0; opacity: 0;
} }
.dic_tree /deep/.is-leaf.el-tree-node__expand-icon.el-icon-caret-right {
// margin-left: -15px !important;
}
</style> </style>
<style lang="scss"> <style lang="scss">
.line_warp {
// width: 300px;
height: 45px;
display: flex;
align-items: center;
.point_left {
width: 50px;
height: 50px;
transform: translateX(14px);
}
.point_right {
width: 50px;
height: 50px;
transform: translateX(-14px);
}
}
.el-tree--highlight-current .el-tree--highlight-current
.el-tree-node.is-current .el-tree-node.is-current
> .el-tree-node__content > .el-tree-node__content
...@@ -425,15 +497,6 @@ export default { ...@@ -425,15 +497,6 @@ export default {
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
#map {
/deep/.ol-zoom {
// display: none;
}
/deep/ .ol-zoom .ol-unselectable .ol-control {
display: none;
}
}
.treeCard { .treeCard {
.el-tree { .el-tree {
overflow-y: scroll; overflow-y: scroll;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment